jquery bind on multiple anchor

Question

Hello, 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.

Answer 1

Are you doing it on DOM ready?

Answer 2

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

Answer 3

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

Answer 4

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