First, record the details:

Recently, I participated in a project, and need to count the consumption details of users in the past six months.

The mui framework is used.

The js part is as follows:

function initMonth() {
    var html="";
    var x=1;
    html +='<ul id="monthList">'
    for (var i=0;i<=5;i++){
        var date=new Date;
        var month=date.getMonth()-i+1;
        if (month<10){
            month = "0" + month;
        }
        var monthDate=year+month;
        monthvarry.push(monthDate);
        if(x==1){
            html+="<li name='monthChoice' class='mui-control-item mui-active'  >"+month+"month</li>";
        }else{
            html+="<li name='monthChoice' class='mui-control-item'  >"+month+"month</li>";
        }
        x++;
    }
 html +='</ul>'
    $("#monthDiv").empty().append(html);


    $("div li").each(function() {
       $(this).click(function() {
            var i=$(this).index();
            $("li[name='monthChoice']").removeClass("mui-active");
            $(this).addClass("mui-active");
            changeMonthDate(monthvarry[i]);
        })
     
    })

}
function changeMonthDate(month){
    alert(month);
}    

After the test was released, it was found that there was no problem in the test written on the pc, and there was no problem in the 7p and 6sp of my colleagues. However, when I click < li > on the Android tester, the Mui activity switches normally, but the event cannot be triggered normally. Only when I click the next point of < li > can the event be triggered correctly.

After trying many methods and being confused for several days, I realized that it might be a conflict between mui and jQuery.

So we abandoned the click method of jQuery and used the event binding of mui to solve the problem.

js is as follows

function initMonth() {
    var html="";
    var x=1;
    html +='<ul id="monthList">'
    for (var i=0;i<=5;i++){
        var date=new Date;
        var month=date.getMonth()-i+1;
        if (month<10){
            month = "0" + month;
        }
        var monthDate=year+month;
        monthvarry.push(monthDate);
        if(x==1){
            html+="<li name='monthChoice' class='mui-control-item mui-active'  >"+month+"month</li>";
        }else{
            html+="<li name='monthChoice' class='mui-control-item'  >"+month+"month</li>";
        }
        x++;
    }
    html +='</ul>'
    $("#monthDiv").empty().append(html);


    $("div li").each(function() {
      /*  $(this).click(function() {
            var i=$(this).index();
            $("li[name='monthChoice']").removeClass("mui-active");
            $(this).addClass("mui-active");
            changeMonthDate(monthvarry[i]);
        })*/
     mui('#monthList').on('tap','li',function () {
         var i=$(this).index();
         $("li[name='monthChoice']").removeClass("mui-active");
         $(this).addClass("mui-active");
         changeMonthDate(monthvarry[i]);
     })

    })

}

function changeMonthDate(month){
    alert(month);
}