Binding dynamically created elements in jQuery_问答_开发者

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>

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.

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

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.

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().

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