在jQuery中绑定动态创建的元素

以下代码相当自我解释，但我遇到了将click事件绑定到已创建的元素的问题。在jQuery中绑定动态创建的元素

您可以在第25行看到我正在创建一个ID为'overlay'的div。然后我设置它的CSS属性。

然后在第65行我绑定点击触发隐藏的模态。问题是，它不起作用。如果我把div放在html中，.click按预期工作。

任何帮助表示赞赏。

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

来源

2010-02-10 S16

+1欢迎来到Stack Overflow，@ Greg-J！ – Sampson 2010-02-10 16:58:26

叠加层的单击事件在元素存在之前绑定。您需要使用live binding来保留绑定–，否则每次创建元素时都必须执行绑定。只要改变你的函数使用live()这样的：

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

的，因为它是在DOM中已经定义当事件势必.modal .close作品Click事件。

正常事件绑定仅考虑DOM中当前存在的元素，而绑定live()的事件也适用于与选择器匹配的所有未来元素。

来源

2010-02-10 16:55:56

这正是我认为的问题，但我不知道如何解决它。谢谢！ – S16 2010-02-10 17:02:11

我相信.delegate（）（或.on（）在jquery 1.7+）更快，更高效 – Khodor 2012-01-26 15:39:47

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

被触发页面加载，当#overlay元素不存在。如果您将这段代码移动到$('a[name=modal]').click(function(e) {部分中，但在$ ('body').append('<div id="overlay"></div>');部分之后，则应该起作用。

来源

2010-02-10 16:52:20

如果您以编程方式创建#overlay，则需要将其与$ .live（）绑定。

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

这种绑定方法绑定到与提供的选择器匹配的所有现在和未来元素。

来源

2010-02-10 16:56:31 Sampson

使用.live（）方法可以处理加载到DOM后的所有元素。

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

另一种方式来做到这一点。将其绑定到单击时添加它（为$单击处理程序（“A [名称=模式]”）内。

你应该也改变$（ '＃覆盖'）。淡出（）为$（本）.fadeOut（）。

来源

2010-02-10 16:56:43

请记住，你的代码将在每次a[name=modal]链接被点击时创建一个新的覆盖..

无论是完成后，从DOM中删除叠加元素..或者在点击之外创建它ð只是显示/隐藏它的单击事件..

您的具体问题是，你绑定click事件的叠加有史以来之前（，因为你将在您点击链接创建..）

来源

2010-02-10 16:59:51

在jQuery中绑定动态创建的元素

回答

相关问题