jquery - 附加到 html 的元素通过单击事件不可见

Question

我将一些 div 附加到 div 容器:

 $.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            $('.Container').append(result);
        }
    }

当我尝试点击新的 div 时，我就是不能。我通过使用

省略了这一点

$('.Container').live('click', function () {

    });

但是你能告诉我为什么我不能在不使用 live() 的情况下做到这一点吗？

Answer 1

您将事件处理程序绑定(bind)到页面加载时存在的元素。

稍后添加的元素必须在当时绑定(bind)。

另一种方法是利用事件委托(delegate)。 jQuery 有 2 个委托(delegate)方法，.live()和.delegate() .

这些方法所发生的情况是，处理程序没有绑定(bind)到有问题的元素，而是绑定(bind)到某个容器。当单击事件冒泡到容器时，jQuery 会检查单击的元素是否与您提供的选择器匹配，如果是，则触发处理程序。

像这样可视化它:

$('.item').click(function() { /* do something */ });

像这样绑定(bind):

<div class="Container">
    <div class="item">click me</div> <!-- handler is bound -->
    <div class="item">click me</div> <!-- handler is bound -->
    <div class="item">click me</div> <!-- handler is bound -->
</div>

但是这个:

$('.Container').delegate('.item','click', function() { /* do something */ });

像这样绑定(bind):

<div class="Container">    <!-- handler is bound to container, and runs the
                                 ".item" selector when a click occurs inside -->
    <div class="item">click me</div> 
    <div class="item">click me</div>
    <div class="item">click me</div> 
</div>

因此，如果您添加额外的 .item元素到.Container ，它们就会正常工作，因为处理程序会处理 .Container 内的所有点击。 .

<div class="Container">    <!-- handler is bound to container, and runs the
                                 ".item" selector when a click occurs inside -->
    <div class="item">click me</div> 
    <div class="item">click me</div>
    <div class="item">click me</div> 

    <div class="item">click me</div>  <!-- new item -->
    <div class="item">click me</div>  <!-- new item --> 
</div>

因此，新项目上的点击事件会像原始项目上一样冒泡。

.live()方法与 .delegate() 相同方法。它只是使用 document作为默认容器，这意味着它必须处理页面上的所有点击。

正因为如此，我更喜欢.delegate() .