Question

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

以下是完整代码：

// 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

<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>

Answer 1

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

<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>

如果这不是一个选项，请将on更改为bind。

-

在实际添加之前，您正在向popupBoxClose元素注册click事件。有两种解决方法...在您添加关闭按钮后添加事件侦听器（即它在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('<a id="popupBoxClose">X</a>');
        registerEvents(); // now it's in the DOM, lets register events
    }
});

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

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

Answer 2

使用event delegation代替

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

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

2 个答案: