JQuery Ajax用JQuery函数替换项目

JQuery Ajax Replacing items with Jquery functions on it

本文关键字：JQuery 项目 替换 Ajax 函数      更新时间：2023-09-26

我的问题是……

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

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

ajax返回"blahblah"然后我把它放到我的表单中，像这样:

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

很好!BUT:

我放入表单的新元素不再被我的jquery观察到…!我有一个这样的函数:

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

这个函数对于我在PAGE LOAD的表单中的元素非常有效，一旦这个元素被替换为另一个来自我的ajax调用，即使它有相同的ID作为前一个，对它的操作不再被JQuery发现…

我如何解决这个问题?

(我真的需要替换我的选择与我的ajax返回，因为有时它不再是一个选择，但输入文本我需要…)

谢谢你的建议

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

当你使用ajax替换元素时

你需要使用事件委派使用.on()委派事件方法。

使用

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

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

当页面准备好时，将事件委托给最近的静态父节点:

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

也不需要第一行，因为它取代了这个div的所有innerHTML:

// $("#myDiv").empty(); <----you can remove it.
$("#myDiv").html(ajaxReturn);
相关文章：