Binding dynamically created elements in jQuery

Question

The following code is fairly self explanatory, but I am running in to an issue binding the click event to an element that has been created.

You can see at line 25 I am creating a div with id of 'overlay'. I then set it's css properties.

Then at line 65 I bind click to trigger the hiding of the modal. The problem is, it doesn't work. If I put the div in the html, the the .click works as expected.

Any help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Modal</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">

$(document).ready(function() {  

    // Select the link(s) with name=modal
    $('a[name=modal]').click(function(e) {

        // Cancel the link behavior
        e.preventDefault();

        // Get the id of this link's associated content box.
        var id = $(this).attr('href');

        // Find the screen height and width
        var overlayHeight = $(document).height();
        var overlayWidth = $(window).width();

        // Create the overlay
        $('body').append('<div id="overlay"></div>');

        //Set css properties for newly created #overlay
        $('#overlay').css({
                'width' : overlayWidth,
                'height' : overlayHeight,
                'position':'absolute',
                'left' : '0',
                'top' : '0',
                'z-index' : '9000',
                'background-color' : '#000',
                'display' : 'none'          
            });

        // Get the viewpane height and width
        var winH = $(window).height();
        var winW = $(window).width();

        // Center the modal
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        // Transition effects for overlay
        $('#overlay').fadeIn(1000).fadeTo(1000,0.8);

        // Transition effect for modal
        $(id).fadeIn(1000); 

    });

    // Close link click = trigger out
    $('.modal .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#overlay').fadeOut(1000);
        $('.modal').fadeOut(200);
    });     

    // Overlay click = trigger out
    $('#overlay').click(function () {
        $('#overlay').fadeOut(1000);
        $('.modal').fadeOut(200);
    });

    // Load rules in to modal
    $('#rules .text').load('rules.html');

});

</script>
<style type="text/css">

.modal{
  position:absolute;
  display:none;
  z-index:9999;
}
#rules{
  width:600px; 
  height:400px;
}
#rules p{
    background: #fff;
    margin: 0;
    padding: 0;
}
#rules .head{
    background: #ddd;
    text-align: right;
    padding: 0 10px;
    height: 30px;
}
#rules .text{
    height: 370px;
    padding: 0 20px;
    overflow: auto;
}

</style>
</head>
<body>

<p><a href="#rules" name="modal">Open Modal</a></p>

<div id="rules" class="modal">
    <p class="head"><a href="#" class="close">close</a></p>
    <p class="text"></p>
</div>

</body>
</html>

score 5 · Accepted Answer · answered Feb 10 '10 at 16:55

5

The click event to the overlay is binded before the element exists. You need to use live binding to retain the binding – otherwise you'd have to do the bind every time you create the element. Just change your function to use live() like this:

$('#overlay').live('click', function () {
    $('#overlay').fadeOut(1000);
    $('.modal').fadeOut(200);
});

The click event for .modal .close works as it is already defined in the DOM when the event is bound.

Normal event binding only considers the elements that currently exist in the DOM while events bound with live() work also on all future elements that match the selector.

answered Feb 10 '10 at 16:55

Tatu Ulmanen

123,288
34
187
185

This is exactly what I thought the problem was, but I did not know how to address it. Thank you! – S16 Feb 10 '10 at 17:02
2

I believe .delegate() (or .on() in jquery 1.7+) is faster and more efficient – Khodor Jan 26 '12 at 15:39

score 0 · Answer 2 · answered Feb 10 '10 at 16:52

 // Overlay click = trigger out
    $('#overlay').click(function () {
        $('#overlay').fadeOut(1000);
        $('.modal').fadeOut(200);
    });

is triggered on page load, when the #overlay element doesn't exist. If you move this piece of code inside the $('a[name=modal]').click(function(e) { part, but after the $('body').append('<div id="overlay"></div>'); part, it should work.

score 0 · Answer 3 · answered Feb 10 '10 at 16:56

If you're creating #overlay programmatically, you need to bind it with $.live();

$('#overlay').live("click", function () {
  $('#overlay').fadeOut(1000);
  $('.modal').fadeOut(200);
});

This method of binding binds to all present, and future elements that match the provided selector.

score 0 · Answer 4 · answered Feb 10 '10 at 16:56

Using the .live() method it will work with any elements you add to the DOM after its loaded.

// Overlay click = trigger out
$('#overlay').live('click', function () {
    $('#overlay').fadeOut(1000);
    $('.modal').fadeOut(200);
});

Another way to do it would be to bind it to click when it is added (inside the click handler for $('a[name=modal]').

You should probably also change $('#overlay').fadeOut() to $(this).fadeOut().

score 0 · Answer 5 · answered Feb 10 '10 at 16:59

Keep in mind that your code will create a new overlay each time the a[name=modal] link is clicked..

Either remove the overlay element from the DOM when you are done with it .. or create it outside of the click, and just show/hide it on the click event ..

You specific problem is that you bind the click event to the overlay before it is ever created (since you will created after you click the link ..)

Binding dynamically created elements in jQuery

5 Answers5

Linked

Related