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 ";

问题是$（“input [type ='checkbox']”）。change（function（）{}）在我第一次加载页面时执行得很好，但是一旦通过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.... */);

动态复选框插入，jquery onchange事件丢失

1 个答案: