jQuery events on dynamically produced links

I have a list of links that are being created dynamically by another function they are in the form <a id="hi-1">test</a> <a id="hi-2">test</a> etc.

I am trying to target these links and bind click/mouseover events开发者_如何学C to them. The following is the code for targeting one of these link(#hi-1):

$(function() {

    $("#hi-1") .bind("mouseover", highlight);
    $("#hi-1") .bind("mouseleave", highlight);
            $("#hi-1") .bind("click", highlight);

    });
    function highlight(evt){
    $("p#p-1").toggleClass("highlighted");
    }

This should toggle the class name of .

I can't seem to get it to work, I believe it could be something to do with the fact that the links are created dynamically. However i have little jQuery experience and i may be going about it the wrong way.

Any Help is much appreciated.

Selectors apply at the time of creation. You select the elements, then you bind to those elements, not to the selector.

You can, however, make use of event bubbling -- ancestor elements are notified of events on child elements. jQuery provides a beautiful syntax for this with delegate:

$('#containerElement').delegate('#hi-1', 'click mouseover mouseleave', highlight);

This assumes #containerElement is an ancestor element of all elements that will be matched.

However, if you only have one element (as is suggested by giving it an ID) it might be easier simply to bind the handler at the time the element is created.

Try

$("#hi-1").live("mouseover mouseleave click", function(){
    $("p#p-1").toggleClass("highlighted");
});

You should use the .live() method of jquery.

http://api.jquery.com/live/

Attach a handler to the event for all elements which match the current selector, now and in the future.

Example:

$('.clickme').live('mouseover', function() {
    // live handler called
});