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

Answer 2

通常不能将事件处理程序分配给尚不存在的DOM对象。 live（）让你解决这个限制。

Answer 3

您必须使用live()方法将事件附加到动态生成的元素，因为它们在页面加载时不存在，这是jQuery最初挂钩事件处理程序的时候。

documentation

中提供了更多信息

Answer 4

根据我的经验，通过jQuery或其他脚本添加到DOM的代码不会响应使用.bind（）方法附加的事件。 .click（）和其他类似的方法只是.bind（）的包装器，所以你有同样的问题。 .live（）通过积极查看事件和目标来查看它们是否匹配来克服此限制。

顺便说一句，干得好 - 找到解决问题的方法对你有好处。

Answer 5

如果你真的不想使用live（），你可以在加载数据后将点击绑定到加载的div

$.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            $('.Container').append(result);
            $('.Container div').click(function(){
                // Loaded div's click code goes here
            });
        }
    }

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

5 个答案: