jquery bind on multiple anchor

Question

I would like to bind the same event to a list of anchor link. Why this does not work?

Markup:

<a tabindex="0" href="#contactRoles" 
    class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" 
    id="contactAdd">
    <span class="ui-icon ui-icon-triangle-1-s"></span>Aggiungi contatto</a>

<div id="contactRoles" class="hidden">
<ul>
    <li><a href="#1" class="contactRole">Cliente</a></li>
    <li><a href="#2" class="contactRole">Controparte</a></li>
    <li><a href="#3" class="contactRole">Avvocato</a></li>
    <li><a href="#4" class="contactRole">Avv. Controparte</a></li>
    <li><a href="#5" class="contactRole">Altre parti</a></li>
    <li><a href="#6" class="contactRole">Domiciliatario</a></li>
    <li><a href="#7" class="contactRole">Pubblico Ministero</a></li>
    <li><a href="#8" class="contactRole">Giudice</a></li>
    <li><a href="#9" class="contactRole">Istruttori</a></li>
    <li><a href="#10" class="contactRole">Studio Legale</a></li>
</ul>
</div>

jQuery:

$('#contactAdd').menu({
    content: $('#contactRoles').html(),
    width: 150,
    showSpeed: 300
});

$("a.contactRole").click(function(event){
    event.preventDefault();
    alert("Link " + $(this).attr("href") + " clicked");
});

Where am I wrong?

EDIT: @everybody: Yes the script is wrapped by a $(document).ready(...)

For further information consider that the div with class "hidden" is hidden and can only be viewed by a click on another anchor as you can see from this screenshot. alt text

Lorenzo - Should still work. Are the a.contactRole elements added to the page dynamically (sometime after the page loads)? — user113716
– user113716, Commented Sep 10, 2010 at 0:18
No Patrick. They are only showed when clicked but that's static markup on the page... — Lorenzo
– Lorenzo, Commented Sep 10, 2010 at 0:25
Lorenzo - Try the edit I did at the top of my answer. Your code should work, but who knows. Also, does other jQuery code work on the page? — user113716
– user113716, Commented Sep 10, 2010 at 0:27
@Patrick: I have done another edit to the question to add the complete markup and jQuery code for the Button that shows the menu. Now I try with your suggestion... — Lorenzo
– Lorenzo, Commented Sep 10, 2010 at 0:32

user113716 · Accepted Answer · 2010-09-10 00:20:02Z

4

EDIT: Based on your comment, you're already wrapped with a ready() function.

Another possibility is that the a.contactRole elements are added to the DOM after the page loads.

If that's the case, try this:

$(function() {
    $("a.contactRole").live('click', function(event){
        event.preventDefault();
        alert("Link " + $(this).attr("href") + " clicked");
    });
});

Original answer:

Should work. Have you made sure the document is loaded before assigning the click handler?

If the <a> elements haven't loaded when you try to assign the handler, it won't work.

Example: http://jsfiddle.net/kjSG8/

   // Wrap your code with $(function() {...}) to make sure it doesn't
   //    run until the DOM is fully loaded
$(function() {
    $("a.contactRole").click(function(event){
        event.preventDefault();
        alert("Link " + $(this).attr("href") + " clicked");
    });
});

edited Sep 10, 2010 at 0:20

answered Sep 9, 2010 at 23:49

user113716

323k64 gold badges454 silver badges441 bronze badges

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

Comments

jamie-wilson · Accepted Answer · 2010-09-09 23:48:07Z

0

It seems like a standard event, are you declaring it within a $(document).ready(function() { }); block?

answered Sep 9, 2010 at 23:48

jamie-wilson

1,92521 silver badges38 bronze badges

Comments

Bob · Accepted Answer · 2010-09-09 23:49:55Z

0

Ensure you create the click when the DOM is ready. You could also just say $(".contactRole").click instead of $("a.contactRole").click

answered Sep 9, 2010 at 23:49

Bob

3,08211 gold badges45 silver badges64 bronze badges

2 Comments

JasCav Over a year ago

To your second statement...I could be wrong, but I believe the jQuery selection is much faster when you define the element ahead of the classes.

Bob Over a year ago

@JasCav - I would agree with you there, but I find when people are new to jquery selectors, it's best to simplify the problems until a firm grasp is understood. (+1 Anyway) ^_^

Collectives™ on Stack Overflow

jquery bind on multiple anchor

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related