Question

我有以下幾點：

somefile.php

$("document").ready(function() { 
    var handler = function(data) { 
    var JsDiv = document.getElementById("somediv"); 
    JsDiv.innerHTML = data; 
    }; 

$("input[type='checkbox']").change(function() { 
    console.log("execute lots of code in this function"); 
    //I need to execute this part again with the new checkboxes 
    //. 
    //. 
    //. 
    //and then 
$.ajax({ 
     url: "ajaxFile.php", 
     success: function(data, textStatus, XMLHttpRequest) { handler(data); } 
}); 

    }); 
}); 

<div id="somediv">
<input type="checkbox" id="someid1" value="anything1" /> checkbox1
<input type="checkbox" id="someid2" value="anything2" /> checkbox2
</div>

---

ajaxFile.php
echo "
<input type='checkbox' id='someid3' value='anything3' /> checkbox3 <br />
<input type='checkbox' id='someid4' value='anything4' /> checkbox4
";

---

的問題是，$（ 「輸入[類型= '複選框']」）。變化（函數（）{}）獲取當我第一次加載執行就好頁面，但是一旦新的複選框已經通過ajax加載，它們就不受該函數的限制。我已經看到關於bind（）和live（）的一些東西，但我不太清楚如何將新的複選框綁定到我已經定義的函數。我需要執行.change（）中的一些代碼。我會在.change（）之外提取該代碼，然後調用該函數，但我不太確定如何執行此操作。如果我的問題不清楚，請讓我知道，我會重新組合。感謝您的幫助。

Answer 1

你只需要委託給一個沒有被破壞的祖先監聽器。以下代碼段使用.on()以及委託語法，並代替您的.change()事件偵聽器。

$("#someContainer").on("change", "input[type='checkbox']", function() { 
    console.log("execute lots of code in this function"); 
}); 

someContainer顯然是（我希望）佔位符的名字。它只是意味着任何容器圍繞您的目標輸入。盡你所能確定最接近的祖先，因爲這將具有最大的性能優勢。但是，如果你絕對必須，你總是可以使用文件：

$(document).on("change" /* .....etc.... */);