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

问题

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

Is a way to re-assign the click event to the if statement?

回答1:

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

回答2:

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

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

来源：https://stackoverflow.com/questions/325200/how-to-bind-a-click-event-on-a-recently-added-a-tag-in-jquery