javascript - 在使用 AJAX 获取 html 内容后，将侦听器添加到新元素的正确方法是什么？(jQuery, Javascript)

Question

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

这是我的想法。我可以创建一个比较文件路径的函数，对于每个条件，然后我将根据 AJAX 加载的页面将正确的侦听器应用于这些新元素。如果我有大量页面，我觉得它会使功能变得如此之大。

谢谢！

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 响应时间，但也可能会减慢点击响应速度。

Answer 2

使用 jQuery 的 . on()处理事件委托。您提供的第一个元素是静态元素（从不删除/替换）。第一个参数是您希望委托的事件，鼠标悬停/单击等。第二个参数是我们希望在事件发生时触发事件的元素。第三个参数是回调，它是事件触发时运行的函数。

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

Answer 3

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

中所有新插入的元素.parent-div都将拥有监听器onclick

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

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