javascript - 动态添加元素，但 jquery onClick 函数不起作用(SimpleBox)

Question

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

我还有另一个按钮，它使用 javascript 动态创建指向我页面的“链接”类的 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>

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

Answer 1

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

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

或者

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

---

断章取义

我想您已经放置了 createLinkDiv 函数，因为您是通过内联 javascript 调用它的。如今，通过内联 javascript 调用函数有点过时了。在代码中绑定(bind)这些事件有助于使您的 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");
});