AJAX調用後語義UI複選框事件不會觸發

我正在使用語義UI 2.1，並且遇到問題。我的頁面中有三個滑塊複選框。他們都有相同的班級，我可以一次初始化他們。它們每個都包含我需要通過AJAX調用發送到服務器的data-*屬性。AJAX調用後語義UI複選框事件不會觸發

這裏的問題：

第一次的AJAX調用完成後，對複選框的事件不再起作用。我知道事件綁定到DOM，並且隨着DOM的更改，它們不會更新，但是有沒有辦法繞過它？

這是我的第一個非常簡單的版本：

<html> 
<body id="body"> 
<!-- First Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="0" type="checkbox"> <label></label> 
</div> 
<!-- Second Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="2" type="checkbox"> <label></label> 
</div> 
<!-- Third Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="3" type="checkbox"> <label></label> 
</div> 

<button class="button-action">Do Stuff</button> 

</body> 
<script> 
$('.checkbox.comment').checkbox().checkbox({ 
    onChecked: function() { 
     // This is only called before ajax reload, after ajax, it just won't 
     console.log("onChecked called"); 
    }, 
    onUnchecked: function() { 
     // This too is only called before ajax reload 
     console.log("onUnchecked called"); 
    } 
}); 

$(document).delegate('.button-action', 'click', function() { 

    $.ajax({ 
     // Noraml ajax parameters 
    }) 
    .done(function (data) { 
     if (data.success) { 
      // Reload 
      $('#body').load(document.URL + ' #body'); 
     } 
    }); 
}); 
</script> 
<html>

來源

2016-07-30 VSG24

你可以嘗試把你的複選框事件偵聽器函數裏面，每次調用這個函數它重新載入網頁或當你在文檔中的變化DOM。我附上了一個示例代碼以供參考。

function Checkbox_eventlistener(){ 
 
    $('.checkbox.comment').checkbox().checkbox({ 
 
     onChecked: function() { 
 
      // This is only called before ajax reload, after ajax, it just won't 
 
      console.log("onChecked called"); 
 
     }, 
 
     onUnchecked: function() { 
 
      // This too is only called before ajax reload 
 
      console.log("onUnchecked called"); 
 
     } 
 
    }); 
 
} 
 

 
$(document).delegate('.button-action', 'click', function() { 
 

 
    $.ajax({ 
 
     // Noraml ajax parameters 
 
    }) 
 
    .done(function (data) { 
 
     if (data.success) { 
 
      // Reload 
 
      $('#body').load(document.URL + ' #body'); 
 
      Checkbox_eventlistener(); 
 
     } 
 
    }); 
 
}); 
 

 
$(function(){ 
 
    Checkbox_eventlistener(); 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<!-- First Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="0" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Second Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="2" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Third Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="3" type="checkbox"> <label></label> 
 
</div> 
 

 
<button class="button-action">Do Stuff</button>

來源

2016-08-01 02:07:12

恐怕行不通。第一次很好，但在頁面重新加載之後，按鈕不會執行任何操作。 – VSG24

是否需要將選擇器後綴表達式放入**。load（）**方法中？根據JQuery文檔： _「當使用沒有後綴選擇器表達式的URL調用.load（）時，在腳本被移除之前，內容被傳遞給.html（），這會在腳本塊被丟棄之前執行。 .load（）是通過在URL中添加一個選擇器表達式來調用的，但是，在DOM被更新之前，這些腳本會被剝離掉，因此不會被執行。「_ _api.jquery.com/load/ –

如果沒有那個'+'＃body''部分，它就會變成一團糟，它會複製'body'。我可以確認，如果沒有該選擇器到網址的結尾，它可以工作，但也可以複製#body。元素 – VSG24

AJAX調用後語義UI複選框事件不會觸發

回答

相關問題