在通过jQuery的load（）函数加载的HTML上使用已经加载的JS？

Question

Not sure if this is posible or not, but I'm trying to use JavaScript that I loaded via a script tag when the page was initially requested on dynamic HTML that was loaded via jQuery's load() function.

Example: http://jsfiddle.net/3MR43/

As you can see in the example, after clicking a link in the pop up box, the link goes. The problem is that the link was suppose to be stopped, and you were suppose to see an alert.

However, if I paste the HTML that I am loading via jQuery, it works, so the code is fine.

Answer 1

Description

You need jQuery .live() or .on() method to bind events to dynamically created html.

Choose .live() or .on() depending on the version of jQuery you are using.

.live() Available since jQuery 1.3. Attach an event handler for all elements which match the current selector, now and in the future.

.on() Available since jQuery 1.7. Attach an event handler function for one or more events to the selected elements.

Check out my sample and this jsFiddle Demonstration

Sample

... for jQuery.live()

$('.lang').live("click", function(e) {   
    e.preventDefault();  
    alert('Testing..');        
});

... for jQuery.on()

$('.lang').on("click", function(e) {   
    e.preventDefault();  
    alert('Testing..');        
});

More Information

• jsFiddle Demonstration
• jQuery.live()
• jQuery.on()

Answer 2

The problem is your .click will do it for only elements that exist at that time . If you want to do it for all potential future elements that that selector will match, you want to use on() ( delgate() or live() with older versions of jQuery).

Answer 3

The $('.lang').click() event must be registered after the element is created!

You need a callback on the load function to register this.

Answer 4

You need to use live to attach handlers to elements that are loaded dynamically.

Try this, it will solve your problem.

$('.lang').live('click',function(e) {

    e.preventDefault();

    alert('Testing..');

});

Answer 5

You have to use on function for dynamicly loaded elements:

    $('.open_lang').click(function(e) {      
    e.preventDefault();    
    $('#popup').load('http://skins.thehabbos.org/pop_up/language.php').css('display', 'block');            
});

$('body').on('click', '.lang', function(e) {    
    e.preventDefault();  
    alert('Testing..');        
});

( live and delegate are deprecated in JQuery 1.7+ which is the version of your JSFiddle)

Fixed JSFiddle