jQuery单击ON现在使用.load触发关闭 [英] jQuery Click ON now triggering close using .load
问题描述
我遇到了一个div弹出窗口的问题，我从外部文件中加载弹出窗口的内容。
此文件上有一个关闭按钮，但单击时它不会关闭弹出窗口。
我错过了什么？
I am having problem with a div popup in which I load the content of the popup from an external file. This file has a close button on it but it's not closing the popup when clicked. What I'm I missing?
以下是完整代码：
// index .html
//index.html
<html>
<head>
<title></title>
<style type="text/css">
#popup_box {
display:none;
position:fixed;
height:300px;
width:600px;
background:#ffffff;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:2px solid #ccc;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
#popupBoxClose {
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
cursor: pointer;
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$('#popupBoxClose').on('click', 'a', function() {
unloadPopupBox();
});
function unloadPopupBox() {
$('#popup_box').fadeOut("slow");
}
function loadPopupBox() {
$('#popup_box').fadeIn("slow");
$('#popup_box').load('external.html');
$('#popup_box').append('<a id="popupBoxClose">X</a>');
}
});
</script>
</head>
<body>
<div id="popup_box">
<h1>This IS A PopUp</h1>
</div>
</body>
</html>
//加载的外部内容external.html
//The loaded external content external.html
<h1>Popup Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a euismod sem. Aenean aliquam magna sed nisi vehicula dapibus. In at quam quis purus venenatis aliquam. Duis malesuada, leo vitae lacinia imperdiet, massa libero ultrices orci, non mollis orci massa eget nisl. Suspendisse malesuada tellus risus, eu consequat nulla lobortis vel. Nullam finibus consectetur erat accumsan lobortis. Praesent porttitor tortor at velit pharetra rutrum. Cras ac lorem dapibus, interdum nunc a, iaculis libero. Quisque sed risus accumsan, dignissim ipsum vel, malesuada urna. Suspendisse potenti. Aliquam sit amet ultricies elit. Vestibulum eget tristique urna.
</p>
<p>
Curabitur malesuada, urna quis efficitur consequat, nibh dui sollicitudin nunc, ac laoreet massa velit id tellus. Praesent interdum leo augue, ut pretium dolor dictum ac. Quisque aliquet erat sit amet dui dignissim, in auctor nisi viverra. Nulla et ullamcorper mauris. Nunc molestie rhoncus porta. Morbi ut vestibulum justo, ac pulvinar sem. Curabitur ac mollis lorem, quis gravida massa. Proin tempor et nibh nec egestas.
</p>
<a id="popupBoxClose">X</a>
推荐答案
jQuery的 on 。您在代码中包含1.2。你应该更新这个（如果可能的话），即改变：
jQuery's on is supported as of jQuery 1.7. You are including 1.2 in your code. You should update this (if possible), i.e. changing:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
到
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
如果这不是一个选项，那么在 c>到 bind 。
If this is not an option, then change on to bind.
-
您正在将click事件注册到 popupBoxClose 元素，然后才能实际添加它。有两种方法可以解决这个问题...在附加关闭后添加事件监听器按钮（即它在DOM中），或者为整个事件中 的父元素添加一个监听器。
You are registering the click event to the popupBoxClose element before you actually add it in. There's two ways around this... Either add the event listener after you've appended the close button (i.e. it's in the DOM), or add a listener to a parent element that is present for this whole event.
我会推荐前者，它在DOM中注册事件。这更清洁，让您更有控制力。如果你向父元素添加了点击侦听器的负载（最坏情况，正文），那么突然之间，你可能会因为可能不存在的元素的大量侦听器而混乱。
I would recommend the former, which is registering the events when they are in the DOM. This is cleaner and keeps you more in control. If you added loads of click listeners to a parent element (worst-case scenario, the body), then all of a sudden you are in a bit of a clutter with loads of listeners for elements that may not exist.
$(document).ready( function() {
loadPopupBox();
function registerEvents() {
$('#popupBoxClose').off('click').on('click', function() {
unloadPopupBox();
});
}
function unloadPopupBox() {
$('#popup_box').fadeOut("slow");
}
function loadPopupBox() {
$('#popup_box').fadeIn("slow");
$('#popup_box').load('external.html');
$('#popup_box').append('<a id="popupBoxClose">X</a>');
registerEvents(); // now it's in the DOM, lets register events
}
});
或以下（我建议不要使用正文）：
or the following (I'd advise against using the body for this):
$('body').on('click', '#popupBoxClose', function() {
unloadPopupBox();
});
这篇关于jQuery单击ON现在使用.load触发关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
