多实例动态javascript弹出链接

我意识到这篇文章可能是这篇文章的重复：

但我不太擅长JavaScript，无法理解如何将它应用到我尝试使用它的上下文中

我正在创建一个javascript片段，它可能会在生成网页的CMS（Umbraco）中被多次调用

一个id（变量名：mediaid）被传递到这个上下文中，我想动态创建一个链接，该链接有一个onclick事件来启动弹出窗口。我将ID传递到我正在使用的上下文中（Umbraco称之为“宏”），并将ID作为查询字符串附加到不同的URL（同一个域），以便生成的页面可以使用ID执行一些操作

我所拥有的一切都是有效的，但一个页面上只有一个实例。我需要一个用户能够在一个页面上插入多个动态链接。现在，生成的最后一个链接对页面上的所有实例使用onclick事件

<script>
    var linkWithQueryParam = 'http://www.mydomain.org/test2?yourkey=<xsl:value-of  select="$mediaid" />';
    var element = document.createElement("a");
    element.id = '<xsl:value-of select="$mediaid" />';
    element.href = '#';
    element.onclick = function() {
        setLink(linkWithQueryParam);
    }
    function setLink(value) {
        window.open(value, 'player',    'width=775,height=520,location=0,directories=0,status=0,menubar=0');
    }
    document.body.appendChild(element);
    element.appendChild(document.createTextNode('Listen To This Audio'));
</script>

var linkWithQueryParam='0http://www.mydomain.org/test2?yourkey=';
var元素=document.createElement（“a”）；
element.id=''；
element.href='#'；
element.onclick=function（）{
setLink（linkWithQueryParam）；
}
函数设置链接（值）{
打开（值'player'，'width=775，height=520，location=0，directories=0，status=0，menubar=0'）；
}
document.body.appendChild（元素）；
元素appendChild（document.createTextNode（'listenthis Audio'）；

例如，我在别处有一个模板，它两次调用我创建的宏：

<umbraco:Macro mediaid="4107" Alias="audioPlayerPopUp" runat="server"></umbraco:Macro>
<umbraco:Macro mediaid="26502" Alias="audioPlayerPopUp" runat="server"></umbraco:Macro>

链接是生成的，但是当我单击它们时，上面在“linkWithQueryParam”中生成的链接对于所有链接来说总是与最后一个链接相同

---

我想如果我设置链接的“id”属性使其唯一，它可能会工作。但这不起作用。如何使动态生成的onclick事件唯一

最后，我改变了我的方法，根据《s.o.邮报》中诺顿的回复使用了一个事件委托

我在示例中使用了一个变体，仅禁用默认链接行为，首先检查链接类是否匹配。此脚本依赖于站点范围内可用的命名div，该div位于主模板的底部，因此可用：

<script>
document.getElementById("main").addEventListener("click", function(e) { 
    if(e.target) 
    { 
        if(e.target.nodeName == "A")
        {
            if(e.target.className == "miniplayer")
            {

                if(e.preventDefault) { 
                    e.preventDefault();
                }
                else
                {
                    e.returnValue = false;
                }
                var target = e.target;
                var popupWindows = window.open(target.href, 'player', 'width=775,height=520,location=0,directories=0,status=0,menubar=0');
            }
        }
    }
});
</script>

---

这似乎不是最好的解决办法。我不喜欢通过url传递mediaid，但它满足了我的所有其他要求

这里的问题是全局变量和闭包。linkWithQueryParam变量是一个全局变量，每次添加脚本时都会更新该变量。当你点击链接时，它会从变量中获取url，当然这是最后一个变量

你可以用几种方法解决这个问题

将此代码包装在立即匿名函数中。这将把变量的范围缩小到匿名函数中

在运行脚本而不是单击链接时设置URL

<div style="display:none" id="audioUrl"><xsl:copy-of select="$mediaNode/audioUrl" /></div>

$(this).jPlayer('setMedia', {mp3: $("#audioUrl").text() }).jPlayer("play");