Question

遇到事件委托问题，无法理解。任何人都可以根据我到目前为止编写的代码指出正确的方向，我是否可以哩？

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

Answer 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语法中过滤的提供的选择器）以及它是否源自从该选择器执行处理程序。

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

Answer 2

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

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)

事件委托问题

2 个答案: