在jQuery中绑定动态创建的元素 [英] Binding dynamically created elements in jQuery
问题描述
以下代码是相当自我解释的，但我遇到了将click事件绑定到已创建的元素的问题。
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.
你可以在第25行看到我正在创建一个id为'overlay'的div。然后我设置它的css属性。
You can see at line 25 I am creating a div with id of 'overlay'. I then set it's css properties.
然后在第65行我绑定点击以触发隐藏模态。问题是，它不起作用。如果我把div放在html中，那么.click会按预期工作。
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.
感谢任何帮助。
<!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>
推荐答案
叠加层的点击事件在元素前绑定存在。您需要使用实时绑定来保留绑定–否则，每次创建元素时都必须执行绑定。只需将您的功能更改为使用 live（），就像这样：
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);
});
.modal .close 的点击事件当事件被绑定时，它已在DOM中定义。
The click event for .modal .close works as it is already defined in the DOM when the event is bound.
正常事件绑定仅考虑DOM中当前存在的元素，而事件与<$ c绑定$ c> live（）也可以处理与选择器匹配的所有未来元素。
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.
这篇关于在jQuery中绑定动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
