JQuery Ajax用Jquery函数替换项目[重复]答案

【问题标题】：JQuery Ajax Replacing items with Jquery functions on it [duplicate]JQuery Ajax用Jquery函数替换项目[重复]
【发布时间】：2014-09-02 03:10:36
【问题描述】：

这是我的问题...

我使用 ajax 和 jquery 来填写表格... 用户在 select 中选择了一些东西，并且，当他选择了这个或那个时，ajax 返回数据，并且这个数据被放入表单中......

有时，使用 ajax 数据返回创建新元素，例如：

ajax 返回 "blahblah", 然后我把它放在我的表格中，像这样：

$("#myDiv").empty();
$("#myDiv").html(ajaxReturn);

它工作正常！但是：

我的 jquery 不再观察到我放入表单中的新元素...！我有这样的功能：

$("#xxxx").on("change",function(){
    alert("something");
});

此功能非常适合我在 PAGE LOAD 的表单中拥有的元素，一旦这个元素被来自我的 ajax 调用的另一个元素替换，即使它与前一个元素具有相同的 ID，JQuery 也不会再发现其上的操作...

我该如何解决？

（我真的需要用我的 ajax 返回替换我的选择，因为有时它不再是选择，而是我需要的输入文本......）

感谢您的建议:)

【问题讨论】：

【解决方案1】：

事件处理程序仅绑定到当前选定的元素；在您的代码进行事件绑定调用时，它们必须存在于页面上。

当您使用 ajax 替换元素时。

您需要使用Event Delegation 使用.on() 委托事件方法。

使用

$("#myDiv").on('change', "#xxxx", function(){
    //Your code
});

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将点击事件绑定到动态创建的元素，同时避免频繁附加和删除事件处理程序的需要。

【讨论】：

【解决方案2】：

当页面准备就绪时，将事件委托给最近的静态父对象：

$("#myDiv").on("change", "#xxxx", function(){
    alert("something");
});

也不需要第一行，因为它替换了这个 div 的所有 innerHTML：

// $("#myDiv").empty(); <----you can remove it.
$("#myDiv").html(ajaxReturn);

【讨论】：