如何在jquery中最近添加的标签上绑定click事件

I have 6 links on a page to an mp3.

我有一个页面上的6个链接到一个MP3。

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

我安装的插件用swf替换这些链接并播放mp3内联。

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.

我遇到的问题是,可以激活所有6个链接并同时播放所有音频。我解决了这个问题(我觉得这是一种笨拙的新手方式),通过在用embed标签替换之前捕获标签,然后在点击另一个标签时将其放回去。

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.

然而,现在这是我的问题:我放回的标签丢失了它的onClick事件(我认为这就是发生的事情)因此,如果第二次点击,则无法像第一次那样切换。

$(".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!

我问是否有办法将click事件重新分配给“if”语句?谢谢!

3 个解决方案

#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.

使用事件委托 - 这意味着将点击绑定到某个容器并让它处理事件。然后,您可以查询event.target以查看它是否是单击的锚点,然后是否需要行为。出于多种原因,这样做更好。

Less events bound to elements (performance)

较少的事件与元素绑定(性能)

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.

失去了onclick处理程序,因为它正被删除。当您重新添加HTML时,它不会返回该处理程序。

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.

看一下livequery插件。使用此插件,即使对于DOM准备就绪的元素,您也可以绑定事件侦听器。

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

    });

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

插件监视DOM并绑定侦听器。您也可以自己强制进行评估:

$.livequery.run()

Some other powerful features:

其他一些强大的功能:

You can expire listeners:

您可以使听众过期:

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

You can register onmatch listeners:

您可以注册onmatch监听器:

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

#1

Less events bound to elements (performance)