1

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

里面的所有东西都是#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);
    });*/
});
});
4

2 回答 2

2

然后将其委托给，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语法中的过滤器中提供的选择器），如果它源自该选择器，则执行处理程序。

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

于 2013-10-15T18:35:42.400 回答
1

首先$("#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)
于 2013-10-15T18:44:13.457 回答