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

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

你可以在第25行看到我正在创建一个id为’overlay’的div。 然后我设置它的css属性。

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

任何帮助表示赞赏。

      $(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('
'); //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'); });   .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; }    
Open Modal
 
 
close
 
 
   

Answer 1

叠加层的点击事件在元素存在之前被绑定。 您需要使用实时绑定来保留绑定 – 否则每次创建元素时都必须执行绑定。 只需将您的函数更改为使用live()如下所示：

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

.modal .close的click事件的工作原理是绑定事件时已在DOM中定义的事件。

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

Answer 2

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

当#overlay元素不存在时，在页面加载时触发。 如果你在$('a[name=modal]').click(function(e) {移动这段代码$('a[name=modal]').click(function(e) { part，但在$ ('body').append('

');部分，它应该工作。

Answer 3

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

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

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

Answer 4

使用.live（）方法，它将与加载后添加到DOM的任何元素一起使用。

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

另一种方法是在添加时将其绑定到click（在$（’a [name = modal]’）的click处理程序内。

您也应该将$（’＃overlay’）。fadeOut（）更改为$（this）.fadeOut（）。

Answer 5

请记住，每次单击a[name=modal]链接时，您的代码都会创建一个新的叠加层。

完成后从DOM中删除overlay元素..或者在点击之外创建它，只需在click事件中显示/隐藏它。

您遇到的具体问题是，在创建之前将click事件绑定到叠加层（ 因为您将在单击链接后创建… ）