附加到html的元素不受click事件的影响

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

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

稍后添加的元素必须在此时绑定.

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

这些方法会发生什么,处理程序没有绑定到有问题的元素,而是绑定到某个容器.当click事件冒泡到容器时,jQuery会检查单击的元素是否与您给它的选择器匹配,如果是,则触发处理程序.

像这样可视化:

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

这样绑定:

<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 */ });

这样绑定:

<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().