Adding an element dynamically, but jquery onClick functions do not work (SimpleBox)

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() 开发者_如何学Go{
                event.preventDefault();
                $("#simplebox").simplebox('close');
            });

        });

    </script>

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

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

As a side note, the $().ready() syntax is deprecated; it's better to use $(document).ready or just call $ with a function as a parameter.

To answer your main question, the .click method only binds to elements that exist when it's called. So when you add elements to the DOM later, you're not launching the simplebox on click because the handler hasn't been bound. You could either use .delegate to attach event handlers, or you could add the onclick directly in the creation of the DOM element.

The accepted answer is out of date now. The live() method has been removed from jQuery 1.9 and replaced with the on() method.

The syntax for on() is

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

So in @jnfr's case, one of his handlers could be re-written as

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

Hopefully this will be of use to anyone arriving here and getting errors when using live().