事件委托问题答案

【问题标题】：Event Delegation Issue事件委托问题
【发布时间】：2013-10-23 16:34:29
【问题描述】：

事件委托有问题，只是想不通。任何人都可以根据我到目前为止编写的代码指出正确的方向，我离得很远吗？？

#activity 中的所有内容都是通过 ajax 加载的。

<div id="activity">
    <table class="activityLog">
        <thead>
            <tr>
                <th class="action">Activity</th>
                <th class="datetime">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Log in succesful</td>
                <td>15th October 2013 - 6:29 PM</td>
            </tr>
            <tr class="odd">
                <td>Logged out successfully</td>
                <td>14th October 2013 - 10:03 PM</td>
            </tr>
        </tbody>
    </table>
    <ul id="activityPaganation" class="paganation">
        <li><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

下面是我正在使用的 jquery。

$(function() {  
// Load Activity
if($("#activity")) {
    $("#activity").load("ajax.php?aid=1");
}

$("#activityPaganation").on("click", "li a", function(e) {
    e.preventDefault();
    var pid = $(this).text();
    alert('1234567');
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) {
        $("#activity").html(response);
        alert(pid);
    });*/
});
});

【问题讨论】：

#activityPagination 在您将事件委派给它时还不存在。 .load 是异步的。
另外，if($("#activity")) { 也不需要。如果元素不存在，则不会发生加载。

标签： jquery events delegation

【解决方案1】：

然后将其委托给activity，因为那似乎没有改变。您的 ajax 调用会再次覆盖 activityPaganation，因此不会保留其上的事件绑定。

$("#activity").on("click", "li a", function(e) {
    e.preventDefault();
    var pid = $(this).text();
    alert('1234567');
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) {
        $("#activity").html(response);
        alert(pid);
    });*/
});

这里是事件委托的基本原理，只要你需要事件或文档头（最坏情况），你就可以将事件绑定到DOM中存在的容器。发生在其后代上的任何点击都会冒泡到父级（您将事件绑定到的位置），然后 jquery 查找选择器匹配项（对于您在 on 语法中提供的过滤器中的选择器），如果它来自那个选择器执行处理程序。

另请注意，对于您当前的事件注册，第一个事件注册不应该工作，因为加载是异步的，您的事件注册部分在加载完成之前执行。

【讨论】：

【解决方案2】：

以$("#activity") 开头的不是布尔值。这是一个 jQuery 选择器，所以使用.length() 来检查它的存在。说明：如果长度为0则为假，其他一切为真

if($("#activity").length) {
    $("#activity").load("ajax.php?aid=1");
}

关于您的问题，#activityPagation 是动态加载的，因此您不能基于该选择器使用 .on()。你可能需要一些不是通过 ajax 加载的东西。

$("#activityPaganation").on("click", "li a", function(e) //doesn't work

替换为

$("#activity").on("click", "li a", function(e) //works

（或）如果#activity 也是ajax，则寻找任何其他静态的外部容器，（或）作为最后的手段，尽管性能不佳

$("document").on("click", "li a", function(e)

【讨论】：