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.... */);