使用AJAX获取HTML内容后，添加监听器到新元素的适当方法是什么？（jQuery，Javascript）

Question

我正在制作一个可以通过AJAX加载新设置页面的东西，我不确定将监听器绑定到这些来自新内容页面的元素的最有效方法是什么？

我的想法是，我可以编写一个比较文件路径的函数，并为每个条件应用正确的监听器，以便根据AJAX加载的页面将这些新元素进行分类。如果我有大量页面，我觉得这将使函数变得非常庞大。

谢谢！

- Lumin

---

使用事件委托。 - SLaks

如果您正在使用全局脚本，那么您所描述的想法本质上就是JQM中的处理方式，您只需要监听具有特定ID的pageinit事件即可。是的，它可能会变得很大。对于所有页面通用的事件，您可以通过使用事件委托来节省编码。 - Kevin B

Answer 1

两种方式：

1）使用.on()绑定到非动态父容器

$('.some-parent-class').on('click', '.element', function() {
  // DO STUFF!
});

2) 在 ajax 调用完成后绑定新元素

$.ajax(url, {
  // ajax options
}).done( function(data) {
  var newEl = $('<div class="element"></div>');
  // Setup your newEl with data here...
  newEl.on('click', function() {
    // do stuff
  });
  newEl.appendTo($('.some-parent-class'));
});

前者通常会导致更快的 AJAX 响应时间，但可能会减慢点击响应速度。

- Populus

---

你的第二个例子很奇怪。如果已经存在 .element 元素 (比如之前的 AJAX 请求)，那么会发生什么？你会绑定两个事件。选择器应该更具体（或者只适用于 AJAX 请求的响应）。 - Ian

这是一个通用情况...如果需要，您可以放入更具体的选择器。 - Populus

是的，我认为那很棒 :) - Ian

@Ohgodwhy 这取决于你想用它做什么 :x，以及从Ajax调用返回了什么数据。 - Populus

@Ohgodwhy 非常有可能。显然，您可以使用data来执行多种操作，并选择绑定事件的目标。 - Ian

Answer 2

使用jQuery的.on()来处理事件委托。您提供的第一个元素是静态元素（从不删除/替换）。第一个参数是要委派的事件，例如mouseover/click等。第二个参数是当事件发生时希望触发事件的元素。第三个参数是回调函数，在事件触发时运行的函数。

$(document).on('event', 'elementIdentifier', function(){
    //your code
});

- Ohgodwhy

---

这个 jsfiddle 是一个完美的例子。@Ian - Jack

Answer 3

$(".parent-div").on("click", ".child-div-class-name" ,function(){
  somefunction();
});

所有在.parent-div内部新插入的元素都将具有onclick监听器。

- anyavacy

Answer 4

在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
       });
    })

- Kal

Answer 5

我不太确定你在这里问什么，但是你可以使用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 <button id="new-button">Click me</button>
    $.get('url', function(res) {
        $('body').append(res);
    });
});

- Jedediah