jQuery的不能切換MDL複選框，當阿賈克斯後

我想基於AJAX的結果後切換一個google material design lite (MDL)複選框，但似乎不工作。jQuery的不能切換MDL複選框，當阿賈克斯後

然後我做了一些測試：我發現，無論是正常的複選框或從阿賈克斯會工作。失敗複選框的實際值會更改，但UI保持不變。

代碼在這裏： `

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
</head> 

A1<input type="checkbox" id="A1" value="A1"><br> 
A2<input type="checkbox" id="A2" value="A2"> 
<hr> 
B1 
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B1"> 
    <input type="checkbox" id="B1" class="mdl-switch__input"> 
    <span class="mdl-switch__label"></span> 
</label> 
B2 
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B2"> 
    <input type="checkbox" id="B2" class="mdl-switch__input"> 
    <span class="mdl-switch__label"></span> 
</label> 

<script> 
    console.log('initial'); 
    console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked') 
      + $('#B1').is(':checked') + $('#B2').is(':checked')); 
    // now toggle the 4 checkbox; A2 and B2 under post funciton 
    $("#A1").prop("checked", true); 
    $("#B1").prop("checked", true); 
    $.post("#", function (data) { 
     console.log("..."); 
     $("#A2").prop("checked", true); 
     $("#B2").prop("checked", true); 
     console.log('after toggle'); 
     console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked') 
       + $('#B1').is(':checked') + $('#B2').is(':checked')); 
    }); 
</script> 
`

或codepen online。複選框A1，A2，B1正在工作。 B2不能正常工作，但其值爲真（請參閱瀏覽器控制檯）。

我忘記了什麼，或者它是一個錯誤？任何意見表示讚賞。

來源

2016-01-26 qing6010

我猜有2個可能的原因。 ①material.min.js在創建元素時只運行一次。 ②網頁主題使用material.min.js更新用戶界面並在發佈後被阻止（爲了安全）。 – qing6010

我爲自己找到了解決方法。我使用trigger（'click'）來代替，這會調用mdl javascript（儘管我沒有閱讀它們）來更新css。

由於點擊事件的模擬將與本身（導致無窮AJAX請求循環時，有一個點擊觸發在點擊）發生衝突，檢測小鼠/節目事件的需要進行使用。下面示例代碼：下面

$('#checkbox').click(function(event) { 
    var $this = $(this); 
    if (event.originalEvent.isTrusted) { 
    //manual click 
    $.post("#", {a: 0}, //post something to server 
     function(data) { 
     console.log('!! a post request !!!'); 
     target = data;//...parse the target from ajax result 
     ($this.is(':checked') !== target) && $this.trigger('click'); 
    }); 
    } else { 
    //program click 
    console.log('++program++'); 
    $this.trigger('click'); 
    } 
});

當從程序調用，代碼：

$.post("#", {a: 0}, function(data) { 
    console.log('!! a post request !!!'); 
    target = data; 
    ($('#checkbox').is(':checked') !== target) && $('#checkbox').trigger('click'); 
    });

與這些代碼

所以，無論是手動點擊或單擊程序只會調用Ajax請求一次。

來源

2016-01-28 14:42:17 qing6010

jQuery的不能切換MDL複選框，當阿賈克斯後

回答

相關問題