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加载的。

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

感谢您的帮助：）

Answer 1

让我们从定义几个术语开始。绑定事件处理程序的元素称为捕获元素。事件发生的元素（因此，单击的元素）是原始元素。

这些元素不必相同，因为Javascript bubble 中的事件，即原始元素的所有祖先元素都会被通知该事件。因此，您可以在任何祖先元素上处理事件。这称为事件委托。

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

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

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

处理程序绑定到所有input元素，源自input元素的事件由它处理。但是，只有绑定处理程序时存在的input个元素才会绑定处理程序，所以这对你没什么好处。

还有另一种语法，带有一个额外的选择器。这允许您指定绑定处理程序的元素以及指定它必须在哪里生成的另一个选择器。在这种情况下，#table将始终存在，因此我们可以绑定到：

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

这说，“将事件处理程序绑定到#table，但只有在事件是单击input元素时才激活它。”

Answer 2

您需要使用.on()

的事件委派语法

试试这个：

$(function() {

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

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

});

在AJAX上使用jQuery函数

2 个答案: