jQuery after loading div issue

[Andy11548]

Hello,

 

I've got an overlay on my website which loads up when a button is clicked. Once the button it clicked, it parses a PHP file into a div which generates the content to be shown in the div. However, I can't seem to get the jQuery to work on buttons which are imported unless I call another Javascript file while populating the div. Does anyone know how I can get this so that it will work weather the buttons are there as the page is loaded or after extra content is brought in?

 

I'm presuming it's due to the 

$(document).ready(function(){

});

Current jQuery

$(document).ready(function() {
	$('.CloseOverlay').click(function() {
		$('.OverlayContainer').hide();
	});
	$('.Approve').click(function() {
		var UserID = $(this).val();
		var Status = "GetData";
		$.post('/Admin/Users/Verified/approveUser.php', { UserID: UserID, Status: Status }, function(data) {
			$('.OverlayWrapper').html(data);
		});
		$('.OverlayContainer').show();
	});
});

P.S - I'm pretty shocking at jQuery/Javascript!

 

 

 

Thanks in advance,

Andy

Edited August 25, 2014 by Andy11548

[CroNiX]

When you set up a click event, or any other targeted event, it can only target the elements that are currently in the DOM. If you bring in new elements, like via ajax or something, you need to add the event to the new element(s) as it knows nothing about previously assigned events. One challenge is to not resetup events that have already been assigned to existing elements.  For instance, if you do something like $('.someclass').click(... and you have 3 buttons with .someclass, those 3 will have the click event assigned.  If, via ajax, you bring in 3 more buttons with .someclass, you don't just want to rerun the $('.someclass').click(... because the original 3 elements will get assigned the event twice while the new ones will only have it once.

 

There are several ways to do that. Look into jQuery "off" and "on" methods for one solution. Look into event namespaces as well.

[CroNiX]

Another thing you can do is add a class to elements that you assign an event to, and then use the :not selector to avoid reassigning them to the same elements.

 

example:

function assignClick(selector) {
    $(selector + ':not(.assigned)').click(function() { //target element that does NOT also have 'assigned' class
        //add 'assigned' class to this element, so we can avoid readding this event to previously assigned elements
        $(this).addClass('assigned'); 
        var UserID = $(this).val();
        var Status = "GetData";
        $.post('/Admin/Users/Verified/approveUser.php', { UserID: UserID, Status: Status }, function(data) {
            $('.OverlayWrapper').html(data);
            assignClick('.Approved'); //assign the event to the new data retrieved via ajax
        });
        $('.OverlayContainer').show();
    });
}

Then:

$(document).ready(function() {
    $('.CloseOverlay').click(function() {
        $('.OverlayContainer').hide();
    });
    assignClick('.Approved'); //assign to .Approved
});