Question

I am trying to use SimpleBox jQuery plug-in on my website. I have the code such that everytime the user clicks on a div of class “link”, a SimpleBox is invoked.

I also have another button that uses javascript to dynamically create divs of class “link” to my page. However, when I try to click these divs, the SimpleBox is not invoked.

    <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>

Any idea why? Any help would be appreciated! Thanks!

Answer 1

For Dynamically added items use .live() or .delegate() to attach event handlers

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

Or

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

---

Out of context

I suppose you’ve placed the the createLinkDiv function since you’re calling it through inline javascript. Calling functions via inline javascript is a bit of out of fashion these days. Binding those events in code helps to keep your javascipt code easily maintainable.

$("#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");
});