jQuery .on() event regarding dynamic content injection

Question

I'm loading in content from a separate file into an element, this works fine however I am trying to attach an event handler to this dynamic content so I can use the jQueryUI slider in the new dynamic div I have created. I have replaced this with an alert for the moment until I can at least get this to fire. I can't see why it will not work. Any help will be much appreciated.

if (modalContentCall[objname].private_use == true) {
    $(this).append($('<div>').load('Content_for_injection.htm #private_use'));
    $(this).on('load', function(event){
        alert('load occured');
    });
};

The above conditional works and loads the content as per line 2 so all good to here, I can't however get the alert on line 4 to display when the content loads.

Thanks in advance for your help.

A

Answer 1

you can use the load callback function to make sure the content is loaded..

$(this).append($('<div>').load('Content_for_injection.htm #private_use',function(){
               alert('load occured');
}));

or making in more readable and clean..

 var $this=$(this);
 var divContent= $('<div />');
 divContent.load('Content_for_injection.htm #private_use',function(){
               alert('load occured');
        $this.append(divContent);
 });