Question

我一直在靠墙撞击大约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>

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

Answer 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();

Answer 2

我没有看到您在脚本中加载动态代码的位置。 bodyLoaded（）函数正在查找id ='body'的任何内容，而在你的第二个代码块中，我看不到任何带有id标记的内容。

动态编写的脚本无法正常运行

2 个答案: