estevan gomez estevan gomez - 6 months ago 16
Javascript Question

jQuery Click ON now triggering close using .load

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?

Here is the full code:

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


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

Answer

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>

to

<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>

If this is not an option, then change on to bind.

--

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.

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();
});