在使用AJAX获取html内容之后，向新元素添加侦听器的正确方法是什么？（jQuery，Javascript）

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

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

谢谢

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

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

两种方式：

1） 使用

.on（）

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（url{
//ajax选项
}).完成（功能（数据）{
var newEl=$（''）；
//在此处使用数据设置您的newEl。。。
newEl.on（'click'，function（）{
//做事
});
newEl.appendTo（$（'.some parent class'）；
});

---

前者通常会导致更快的ajax响应时间，但可能会降低单击响应速度。

我不完全确定您在这里要问什么，但您可以使用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);
    });
});

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'新建按钮'，函数（）上）{
警报（“您单击了新按钮”）；
});
//通过ajax获取一些HTML。让我们假设您得到了Click me
$.get（'url'，函数（res）{
$（'body'）。追加（res）；
});
});

---

在

.parent div

中插入的所有新元素都将使侦听器

onclick

添加到Populus的答案中，这很好，但逻辑上与他的第二个选项等效的解决方案是使用：

---

使用事件委托。您所描述的思想本质上是如何在JQM中处理的。如果您使用全局脚本，您只需侦听具有特定id的pageinit。是的，它可能会变大。对于所有页面通用的事件，您可以通过使用事件委派来保存编码。如果存在现有的

.element

元素（如以前的AJAX请求），会发生什么情况？你绑定了两个事件。该选择器应该更具体（或者只应用于来自AJAX请求的响应），这是一个一般情况。。如果你想的话，你可以加入一个更具体的选择器，我认为这很好：）它不应该是

.done（函数（数据）{$（'.element'，数据）。点击（函数（）{}；}）？@Ohgodwhy取决于您想用它做什么：x，以及从ajax调用返回什么数据。JSFIDLE是一个完美的例子@Ian
$(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);
    });
});

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

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