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.

Solution 1:

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:

<scriptsrc="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"type="text/javascript"></script>

to

<scriptsrc="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();

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

    functionunloadPopupBox() { 
        $('#popup_box').fadeOut("slow");
    }   

    functionloadPopupBox() {
        $('#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();
});

Solution 2:

use event delegation for that

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