ajax - 将 jQuery 的 on 函数与 AJAX 结合使用

Question

这个主题似乎反复出现，但抱歉，我找不到任何问题的答案。

我正在使用 jQuery 通过 Ajax 更新 div 内容。此更新由更新的 div 内的项目触发。

$(function() {

    $(".add").on('click',function(){
        $("#table").load("displayTable.php");
    });

    // just to see if I can update the DOM...
    $('input').on('click',function(){
        $(this).css("background","red");
    });

});

HTML:

    <div id="table">
      <input type="text" />            
      <a class="add">Add</a>
    </div>

由于 DOM 未更新，jQuery 函数仅适用于原始 #table，不适用于 ajax 加载的 #table。

我不太了解如何使用 on()，因为我猜这将是更新监听器的解决方案...

感谢您的帮助:)

Answer 1

让我们首先定义几个术语。绑定(bind)事件处理程序的元素称为捕获元素。事件发起的元素(即被单击的元素)是原始元素。

这些元素不必相同，因为Javascript中的事件bubble，也就是说，原始元素的所有祖先元素都会收到该事件的通知。因此您可以处理任何祖先元素上的事件。这称为事件委托(delegate)。

on 方法是进行事件委托(delegate)的好方法。原始选择中的元素是捕获元素:事件处理程序将绑定(bind)到该元素。如果此元素始终存在 - 即它不会被 AJAX 替换 - 您可以确定所有事件都将由此处理程序处理，即使它们源自尚不存在的元素。

最简单的 on 形式只有一个选择器，它既被视为原始元素又被视为捕获元素:

$('input').on('click', function() {

处理程序绑定(bind)到所有 input 元素，并且源自 input 元素的事件由它处理。但是，只有绑定(bind)处理程序时存在的 input 元素才会绑定(bind)处理程序，因此这对您来说没有多大好处。

还有另一种语法，带有附加选择器。这允许您指定处理程序绑定(bind)的元素以及指定处理程序必须源自何处的另一个选择器。在这种情况下，#table 将始终存在，因此我们可以绑定(bind)到它:

$('#table').on('click', 'input', function() {

这表示“将事件处理程序绑定(bind)到 #table，但仅当事件是单击 input 元素时才激活它”。