动态编写的脚本不起作用答案

【问题标题】：Dynamically Written script not functioning动态编写的脚本不起作用
【发布时间】：2012-11-01 19:05:07
【问题描述】：

我已经用头撞墙了大约 4 个小时，试图弄清楚为什么这不起作用。我有一个程序需要根据 SQL 查询的结果数量动态编写代码。

我正在使用一个名为 EasyBox 的 jquery 灯箱。当它像这样硬编码时，它可以工作：

<body id="body" onload="bodyLoaded()">
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a>
<div id="test" style="display:none; width:320px; height:240px">
    <p>Test Content</p>
</div>    
<script type="text/javascript">
    function bodyLoaded(){
        $('#link').attr('onclick', 'logText("Hello")');
    }
    function logText(message){
        console.log(message);   
    }
</script>

但是，当我像这样动态编写链接时，EasyBox 弹出窗口不会触发。

<body id="body" onload="bodyLoaded()">
<div id="test" style="display:none; width:320px; height:240px">
    <p>Test Content</p>
</div>
<script type="text/javascript">
    function bodyLoaded(){
        document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";
        $('#link').attr('onclick', 'logText("Hello")');
    }
    function logText(message){
        console.log(message);   
    }
</script>

任何想法为什么这会起作用？我在这里拉头发！

【问题讨论】：

你知道onload和dom-ready的区别吗？
我没有发现问题 - 我已将您的第二个脚本块复制到测试页面中，它工作正常。它将“Hello”记录到控制台中。

标签： javascript jquery html dynamic-html

【解决方案1】：

我不明白你为什么不只是使用 jQuery 来完成所有这些工作。

$(function(){
   $('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>");
   $('#link').click(function(){
      alert("Hello");
   });
});

如果 .click() 不起作用，您也可以尝试 .live()。两者都在 jsfiddle 中为我工作（http://jsfiddle.net/LZxrL/ 和 http://jsfiddle.net/LZxrL/1/）。

另外，当body元素本身的id为'body'时，为什么大家一直说没有id='body'的元素。显然，他想在正文中添加一个链接。

编辑：我刚刚阅读了您对另一篇关于灯箱问题的评论，而不是点击事件。那确实改变了事情。我对该插件不够熟悉，无法权威地发表评论，但我怀疑该插件在页面加载时会查找 rel="lightbox" 并且之后添加的任何元素都不会被捕获。大多数插件都有手动方法，例如：

$('#link').lightbox();

【讨论】：

感谢您的提醒。我最终在 rel="lightbox" 页面上创建了一个隐藏链接，以便 EasyBox 注意到它。然后根据我想要的位置更改链接的href，然后通过jquery触发链接。它不漂亮，但它有效。

【解决方案2】：

我没有看到您在脚本中加载动态标签的位置。 bodyLoaded() 函数正在寻找任何带有 id='body' 的东西，在你的第二个代码块中我没有看到任何带有该 id 标签的东西。

【讨论】：

见第一行：<body id="body" onload="bodyLoaded()"> 另见第七行：document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";