jQuery如何绑定div中的所有锚

Question

在此div上绑定每个<a>上的单击事件时遇到问题:

<div id="box_list_menu" class="boxlistmenu">
    <a href="/profile/00000000-0000-0000-0000-000000000001/grantAccessToPrivatePhotos/index.php?tid=${ID}&un=${Name}" id="${ID}_grantAccessPrivatephotos" rel="link" class="boxlistmenu_grantaccessprivatephotos" title="Donner accès à vos photos privées"></a>
    <a href="/profile/00000000-0000-0000-0000-000000000001/denyAccessToPrivatePhotos/index.php?tid=${ID}&un=${Name}" id="${ID}_denyAccessPrivatephotos" rel="link" class="boxlistmenu_denyaccessprivatephotos" title="Retirer l'accès à vos photos privées"></a>
    <a href="/profile/00000000-0000-0000-0000-000000000001/block/index.php?tid=${ID}" id="${ID}_unblock" rel="link" class="boxlistmenu_block" title="Bloquer ce membre"></a>
    <a href="/profile/00000000-0000-0000-0000-000000000001/unblock/index.php?tid=${ID}" id="${ID}_block" rel="link" class="boxlistmenu_unblock" title="Débloquer ce membre"></a>
    <a href="/profile/report/00000000-0000-0000-0000-000000000001/index.php?tid=${ID}&un=${Name}" rel="link" class="boxlistmenu_report" title="Signaler ce profil à un administrateur"></a>
</div>

这是我的jquery代码:

container.find('#box_list_menu:a').bind("click", function (e) {
    e.stopPropagation();
    var t = this.id.split("_");
    var profileID = t[0];
    var action = t[1];
    var btn = $(this);
    btn.trigger("blur").attr("disabled", "disabled").addClass("inactive").find("b").html(bscTexts.search.pleaseWait);
    alert("boxlist_menu action = " +action+ " e = " +e);
    switch (action) {
        case "block":
            bsc.event.addListener(bsc.menu.listenerTypes.block, "profile", function (e) {
                $("#" + profileID + "_block").hide();
                $("#" + profileID + "_unblock").show();
                btn.removeAttr("disabled").removeClass("inactive").find("b").html(btn.attr("title"));
            });
            bsc.menu.BlockProfile(e, profileID);
            break;
        case "unblock":
            bsc.event.addListener(bsc.menu.listenerTypes.unblock, "profile", function (e) {
                $("#" + profileID + "_unblock").hide();
                $("#" + profileID + "_block").show();
btn.removeAttr("disabled").removeClass("inactive").find("b").html(btn.attr("title"));
            });
            bsc.menu.UnblockProfile(e, profileID);
            break;
        case "grantAccessPrivatephotos":
            bsc.event.addListener(bsc.menu.listenerTypes.grantAccessPrivatephotos, "profile", function (e) {
                $("#" + profileID + "_grantAccessPrivatephotos").hide();
                $("#" + profileID + "_denyAccessPrivatephotos").show();
btn.removeAttr("disabled").removeClass("inactive").find("b").html(btn.attr("title"));
            });
            bsc.menu.GrantAccessToPrivatePhotos(e, profileID);
            break;
        case "denyAccessPrivatephotos":
            bsc.event.addListener(bsc.menu.listenerTypes.denyAccessPrivatephotos, "profile", function (e) {
                $("#" + profileID + "_denyAccessPrivatephotos").hide();
                $("#" + profileID + "_grantAccessPrivatephotos").show();
btn.removeAttr("disabled").removeClass("inactive").find("b").html(btn.attr("title"));
            });
            bsc.menu.DenyAccessToPrivatePhotos(e, profileID);
            break;
        default:
    }
    return false;
});

只执行一个href，不进入容器。发现我的警报弹出窗口从未打开，切换情况从未执行，我的addListener从未添加!

非常感谢您的帮助

Answer 1

如果您使用的是jquery>= 1.7，请使用。on()

$('#box_list_menu').on('click', 'a', function(e){
    //Do whatever you want
})

Answer 2

问题似乎是你的选择器，box_list_menu:a。这将选择任何满足:a伪类的box_list_menu元素(在css或jQuery中不存在)。在id为box_list_menu的元素下选择任何a元素。

用这个代替

container.find('#box_list_menu a').bind(...)

还是

$('#box_list_menu a').bind(...)

注意#box_list_menu和a之间的空格——这意味着选择#box_list_menu的后代a元素。

进一步阅读

• selector | jQuery API Documentation