Question

我意识到这个帖子可能是这个帖子的重复： Using Javascript to dynamically create links that trigger popup windows

但是我对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>

所以，例如，我在其他地方有一个模板，它调用我创建的这个宏，两次：

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

生成链接，但是当我点击它们时，上面在“linkWithQueryParam”中生成的链接始终是所有链接的最后一个链接。

我想也许如果我设置链接的“id”属性以使其唯一，它就可以工作。但这不起作用。如何使动态生成的onclick事件独一无二？

Answer 1

我最终改变了我的方法，并在this s.o中根据unclenorton的回复使用了一个事件委托。发布

http://davidwalsh.name/event-delegate

我在示例中使用了一个变体来仅禁用默认链接行为，首先检查链接类是否匹配。此脚本依赖于一个在整个站点范围内可用的命名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>

然后我编辑了我的用户宏来简单地放置类＆＃34; miniplayer＆＃34;在它创建的每个链接上，并将媒体id作为查询参数包含在另一个提供媒体播放器的URL中。然后，其他url资源将查询参数id从url中拉出，并查找指向媒体项的链接。但上面的.js以我想要的方式启动弹出窗口。

我遇到的一个挑战是如何将结果媒体资源动态分配给播放器（在本例中为jPlayer）。我发现如果我将媒体网址写入隐藏的div，我就可以告诉jPlayer从中读取值。

所以我有第二个宏获取查询参数并将其写入隐藏的div：

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

最后，我调整jPlayer jQuery从隐藏的div中读取url：

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

它似乎不是最佳解决方案。我不想通过网址传递媒体，但它符合我的所有其他要求

Answer 2

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

您可以通过以下几种方式解决此问题，

将此代码包含在一个即时匿名函数中。这会将变量的范围缩小到匿名函数中。
在运行脚本时设置URL，而不是在单击链接时设置URL。

多实例动态javascript弹出链接

2 个答案: