在使用AJAX获取html内容后，将侦听器添加到新元素的正确方法是什么？ （jQuery，Javascript）
我正在制作可以通过AJAX加载新设置页面的东西，我不确定将侦听器绑定到新内容页面中的那些元素的最有效方法是什么？
这是我的想法。 我可以创建一个比较文件路径的函数，对于每个条件，然后我将根据AJAX加载的页面将正确的侦听器应用于这些新元素。 如果我有大量的页面，我觉得它会使function变得如此之大。
谢谢！
两种方式：
1）使用.on()绑定非动态父容器
$('.some-parent-class').on('click', '.element', function() { // DO STUFF! });
2）在ajax调用完成后绑定新元素
$.ajax(url, { // ajax options }).done( function(data) { var newEl = $(''); // Setup your newEl with data here... newEl.on('click', function() { // do stuff }); newEl.appendTo($('.some-parent-class')); });
前者通常会导致更快的ajax响应时间，但也可能会降低点击响应速度。
使用jQuery。 on（）处理事件委托。 您提供的第一个元素是静态元素（从不删除/替换）。 第一个参数是您希望委托的事件，鼠标hover/单击等。第二个参数是我们希望事件发生时触发事件的元素。 第三个参数是回调，它是事件触发时运行的函数。
$(document).on('event', 'elementIdentifier', function(){ //your code });
$(".parent-div").on("click", ".child-div-class-name" ,function(){ somefunction(); });
.parent-div所有新插入元素都将具有侦听器onclick
除了Populus的答案，这是一个很好的答案，对他的第二个选项的逻辑等效解决方案是使用Promises ：
var iGotYou = new Promise(function (res, rej) { $.ajax({ //ajax paramaters }) .done(function( data ) { //handle the data as necessary... //then resolve the Promise res(); }); }); //the Promise has been resolved iGotYou.then(function (response) { //add the event listener now that the promise has been fulfilled document.getElementById('someId').addEventListener('click', function (e) { //whatever you want to do on click event }); })
我不完全确定你在这里问的是什么，但你可以使用jQuery的.on（）函数绑定到文档中已经存在的元素，以及将来会存在的元素。
这是一个简单的例子：
$(document).ready(function () { $(document).on('click', '#new-button', function() { alert("You clicked the new button"); }); //get some HTML via ajax. Let's assume you're getting $.get('url', function(res) { $('body').append(res); }); });