jQuery单击ON现在使用.load触发关闭

我有一个div弹出窗口的问题，我从外部文件中加载弹出窗口的内容。 此文件上有一个关闭按钮，但单击时它不会关闭弹出窗口。 我错过了什么？

这是完整的代码：

//index.html

    #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; }    $(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('X'); } });    
 
This IS A PopUp
 
   

//加载的外部内容external.html

 
Popup Content
 
 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. 
 
 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. 
 X 

Answer 1

从jQuery 1.7开始支持jQuery的on 。 您在代码中包含1.2。 你应该更新这个（如果可能的话），即改变：

至

如果这不是一个选项，那么更改为bind 。

–

在将实际添加它之前将click事件注册到popupBoxClose元素。有两种解决方法…在添加关闭按钮后添加事件侦听器（即它在DOM中）或添加侦听器到整个事件的父元素。

我会推荐前者，它在DOM中注册事件。 这更清洁，让您更有控制力。 如果你向父元素添加了大量的点击监听器（最糟糕的情况，身体），那么突然之间，你可能会因为可能不存在的元素的大量监听器而变得混乱。

 $(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('X'); registerEvents(); // now it's in the DOM, lets register events } }); 

或以下（我建议不要使用身体）：

 $('body').on('click', '#popupBoxClose', function() { unloadPopupBox(); }); 

Answer 2

使用事件委托

 $('body').on('click', '#popupBoxClose', function() { unloadPopupBox(); })