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