0

我已经用头撞墙了大约 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>

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

4

2 回答 2

2

我不明白你为什么不只是使用 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();
于 2012-11-01T19:27:07.763 回答
-1

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

于 2012-11-01T19:10:21.210 回答