在jQuery中綁定動態創建的元素
[英]Binding dynamically created elements in jQuery
問題描述
以下代碼是相當自我解釋的，但我遇到了將click事件綁定到已創建的元素的問題。
你可以在第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>
5 個解決方案
解決方案1
5 已采納 2010-02-10 16:55:56
疊加層的點擊事件在元素存在之前被綁定。 您需要使用實時綁定來保留綁定 - 否則每次創建元素時都必須執行綁定。 只需將您的函數更改為使用live()如下所示：
$('#overlay').live('click', function () {
$('#overlay').fadeOut(1000);
$('.modal').fadeOut(200);
});
.modal .close的click事件的工作原理是綁定事件時已在DOM中定義的事件。
普通事件綁定僅考慮DOM中當前存在的元素，而與live()綁定的事件也適用於與選擇器匹配的所有未來元素。
解決方案2
0 2010-02-10 16:52:20
// 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('<div id="overlay"></div>');部分，它應該工作。
解決方案3
0 2010-02-10 16:56:31
如果您以編程方式創建#overlay，則需要將其與$ .live（）綁定;
$('#overlay').live("click", function () {
$('#overlay').fadeOut(1000);
$('.modal').fadeOut(200);
});
這種綁定方法綁定到與提供的選擇器匹配的所有當前和未來元素。
解決方案4
0 2010-02-10 16:56:43
使用.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（）。
解決方案5
0 2010-02-10 16:59:51
請記住，每次單擊a[name=modal]鏈接時，您的代碼都會創建一個新的疊加層。
完成后從DOM中刪除overlay元素..或者在點擊之外創建它，並在click事件上顯示/隱藏它。
您遇到的具體問題是，在創建之前將click事件綁定到疊加層（ 因為您將在單擊鏈接后創建... ）
動態創建的DOM元素上的jQuery事件綁定
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.