Javascript 动态添加元素，但jquery onClick函数不起作用（SimpleBox）

我正在尝试在我的网站上使用SimpleBox jQuery插件。我有这样的代码，每次用户单击类“link”的div时，都会调用SimpleBox

我还有另一个按钮，它使用javascript动态创建指向我的页面的类“link”的div。但是，当我尝试单击这些div时，不会调用SimpleBox

    <script type="text/javascript">

        function createLinkDiv()
        {
            var parentDiv = document.getElementById ("right");
        var linkDiv = document.createElement("div");
            numDivs++;
            linkDiv.setAttribute("class","link");
            linkDiv.setAttribute("id",numDivs);

            parentDiv.appendChild(linkDiv);
        }

        $().ready(function() {

            $(".link").click(function(event) {
                event.preventDefault();
                $("#simplebox").simplebox();
            });  

            $(".close_dialog").click(function() {
                event.preventDefault();
                $("#simplebox").simplebox('close');
            });

        });

    </script>

函数createLinkDiv（）
{
var parentDiv=document.getElementById（“右”）；
var linkDiv=document.createElement（“div”）；
numDivs++；
linkDiv.setAttribute（“类”、“链接”）；
linkDiv.setAttribute（“id”，numDivs）；
parentDiv.appendChild（linkDiv）；
}
$（）.ready（函数（））{
$（“.link”）。单击（函数（事件）{
event.preventDefault（）；
$（“#simplebox”）.simplebox（）；
});  
$（“.close_dialog”）。单击（函数（）{
event.preventDefault（）；
$（“#simplebox”）.simplebox（'close'）；
});
});

---

知道为什么吗？任何帮助都将不胜感激！谢谢

对于动态添加的项目，请使用或附加事件处理程序

$(".link").live("click",function(event) {
    event.preventDefault();
    $("#simplebox").simplebox();
});

或

---

断章取义

我想您已经放置了

createLinkDiv

函数，因为您是通过内联javascript调用它的。如今，通过内联javascript调用函数有点过时。在代码中绑定这些事件有助于保持javascipt代码易于维护

$("#createLink").click(function(){
    $('<div/>').attr({"class":"link","id":"link_" + $(".link").size() }) 
                     //Id shouldn't start with a number (not in HTML5)
               .click(linkClick)
                //Now you don't have to use live
               .appendTo("#right");
});

$（“#创建链接”）。单击（函数（）{
$（''）.attr（{“类”：“链接”，“id”：“链接”+$（“.link”）.size（）}）
//Id不应该以数字开头（不是在HTML5中）
。单击（链接单击）
//现在你不必使用live
.附于（“#右”）；
});

作为旁注，

$（）.ready（）

语法已被弃用；最好使用

$（document）.ready

或只调用$作为参数

---

要回答您的主要问题，请单击

。方法仅绑定调用时存在的元素。因此，当您稍后向DOM添加元素时，您不会在单击时启动simplebox，因为处理程序尚未绑定。您可以使用
.delegate
附加事件处理程序，也可以在创建DOM元素时直接添加onclick。
接受的答案现在已过期。该方法已从jQuery1.9中删除，并替换为该方法

on（）
的语法为

$(element).on(event, selector, handler)

因此，在@jnfr的例子中，他的一个处理程序可以重新编写为

$(document).on("click",".link",function(event) {
                event.preventDefault();
                $("#simplebox").simplebox();
            });

希望这对任何来到这里并在使用
live（）
时出错的人都有用。live在动态创建的内容中非常重要，尤其是ajax。
$(document).on("click",".link",function(event) {
                event.preventDefault();
                $("#simplebox").simplebox();
            });