How to bind a click event on a recently added <a> tag in jquery

Question

Hello. I have 6 links on a page to an mp3.

The plugin I installed replaces those links with a swf and plays that mp3 inline.

The problem I had was that it was possible to activate all 6 links and have all audio playing at once. I solved that problem (I feel in a clumsy novice way though) by catching the < a > tag before it was replaced with the embed tag and then putting it back when another one was clicked.

However, this is my problem now: the < a > tag I put back looses it's onClick event (i think that's what is happening) and so, if clicked a second time, fails to switch like the first time.

$(".storyplayer a").bind("click", function() {

     // replace the <a> tag from the previous media player installation
     if (previousplayerlocation != null) {$("#" + previousplayerlocation + " .storyplayer").html(graboldcode);}  

     // now remember this installation's <a> tag before it's replaced
     graboldcode = $(this).parent().html();
     // remember where I grabbed this <a> tag from
     previousplayerlocation = $(this).parents("div.storylisting").attr("id");

     // replaces the <a> tag with the media player.
     $(this).media({width: 190,height: 30});
     return false;
    });

I am asking if there is a way to re-assign the click event to the "if" statement? Thanks!

Answer 1

The <a> loses the onclick handler because it is being removed. When you re-add the HTML, it doesn't get back that handler.

Without rearranging your code much, you can create a function which will serve as your click handler.

function playerClicked() {    
        // replace the <a> tag from the previous media player installation
        if (previousplayerlocation != null) {
            $("#" + previousplayerlocation + " .storyplayer")
                .html(graboldcode)
                .click(playerClicked);  // Re-add the onclick handler
        }

        // now remember this installation's <a> tag before it's replaced
        graboldcode = $(this).parent().html();
        // remember where I grabbed this <a> tag from
        previousplayerlocation = $(this).parents("div.storylisting").attr("id");

        // replaces the <a> tag with the media player.
        $(this).media({width: 190,height: 30});
        return false;
}

$(".storyplayer a").bind("click", playerClicked);

Answer 2

Use event delegation - this means binding the click to some container and let that handle the event. You can then query the event.target to see if it was an anchor that was clicked then do you required behaviour. This is better for a number of reasons.

1. Less events bound to elements (performance)
2. No need to rebind events after adding/removing content as the container remains a constant and will always be there to handle the bubbled click event.

The code would be something like

$('#someContainer').click( function(ev){

    var $el=$(ev.target);
    if ( $el.is('a') ){
       //do your stuff
    }

});

See this post for more reading

Answer 3

Have a look at the livequery plugin. With this plug-in you can bind event listeners even for elements that aren't available in DOM ready.

$('a').livequery('click', function(){

    });

The plug-in monitors the DOM and binds the listeners. You can also force the evaluation yourself:

$.livequery.run()

Some other powerful features:

You can expire listeners:

$('a').livequery.expire('click')

You can register onmatch listeners:

$('a').livequery(
function(){ onmatchHandler},
function(){ onmismatchHandler }
);