在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中綁定動態創建的元素

回答

相關問題