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

Question

我在一个页面上有 6 个指向 mp3 的链接。

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

我遇到的问题是可以激活所有 6 个链接并同时播放所有音频。 我解决了这个问题（虽然我感觉是一种笨拙的新手方式），方法是在 标记被替换为嵌入标记之前捕获它，然后在替换时将其放回原处。另一个被点击。

但是，现在这是我的问题：我放回的 标签会丢失它的 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;
    });

有没有办法将点击事件重新分配给 if 语句？

Answer 1

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

1. 与元素绑定的事件较少（性能）
2. 在添加/删除内容后无需重新绑定事件，因为容器保持不变，并且始终在那里处理冒泡的单击事件。

代码类似于

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

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

});

查看此 post< /a> 更多阅读

Answer 2

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

无需重新安排您的代码，您就可以创建一个函数来充当您的点击处理程序。

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 3

查看 livequery 插件。 使用此插件，即使对于 DOM 中不可用的元素，您也可以绑定事件侦听器。

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

    });

插件监视 DOM 并绑定侦听器。 您还可以自己强制评估：

$.livequery.run()

一些其他强大的功能：

您可以使侦听器过期：

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

您可以注册 onmatch 侦听器：

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