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

Question

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

这是我的想法。我可以制作一个比较文件路径的函数，对于每种情况，我都会根据 AJAX 加载的页面将正确的监听器应用于这些新元素。我觉得如果我有大量的页面，它会把功能弄得很大。

谢谢!

Answer 1

两种方式:

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

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

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

$.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 响应时间，但可能也会降低点击响应速度。