jQuery how to bind all anchors in a div

Question

I have a problem to bind a click event on each <a> on this div:

<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>

This is my jquery code:

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;
});

only the a href is execute, never enter on container.find my alert popup never open, the switch case never execute and my addListener never added !

Thank you very much for your helping

you said you have problem, what is it? doesnt your codes work? return error or what?? please update the question. — egig
– egig, Commented Apr 6, 2013 at 3:15
Only a href open the page and never my alert popup, my switch case never entered and never my addListener is add — LiTHiUM2525
– LiTHiUM2525, Commented Apr 6, 2013 at 3:23

Arun P Johny · Accepted Answer · 2013-04-06 03:30:29Z

2

You you are using jquery >= 1.7, use .on()

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

answered Apr 6, 2013 at 3:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LiTHiUM2525 Over a year ago

just a secund i try this !

p.s.w.g · Accepted Answer · 2013-04-06 03:39:32Z

0

The problem appears to be your selector, box_list_menu:a. This will select any box_list_menu elements that satisfy the :a psuedoclass (which doesn't exist in css or in jQuery). What you want select any a elements under element with the id box_list_menu.

Use this instead

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

Or just

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

Notice the space between #box_list_menu and a -- this means to select a elements that are descendants of #box_list_menu.

Further Reading

Selectors | jQuery API Documentation

edited Apr 6, 2013 at 3:39

answered Apr 6, 2013 at 3:19

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

6 Comments

p.s.w.g Over a year ago

@LiTHiUM2525 notice the space between the #box_list_menu and the a. That's critical. Your latest edit still has a colon instead of a space.

LiTHiUM2525 Over a year ago

where you see a space between ?? i have a : not a space

p.s.w.g Over a year ago

@LiTHiUM2525 yes, that's the problem.

LiTHiUM2525 Over a year ago

when i use : container.find('#box_list_menu a').bind(...) i obtain : ReferenceError: container is not defined

p.s.w.g Over a year ago

@LiTHiUM2525 Try replacing container.find(...) with $(...).

|

Collectives™ on Stack Overflow

jQuery how to bind all anchors in a div

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related