$ .load（内容）后jQuery中无法访问元素

Question

I use jQuery with the $.load() function to include markup (from separate file) in my main html file, index.html

For example, I load contact.html in:

<div id="bloc_load"></div> in 'index.html'

That works correctly.

The issue is, in contact.html I have:

<input type="button" id="button_of_contact">

This element is loaded in index.html but I cannot access it with:

$('#button_of_contact').click(function(){
    alert('Click');
});

If I view the source code in index.html after loading contact.html , I see:

<div id="bloc_load"></div>

The div is empty, so I think jQuery cannot access. How can I resolve this issue?

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

$('#button_of_contact').live("click", function(e) {   
    e.preventDefault();  
    // do something;        
});

... for jQuery.on()

$('#button_of_contact').on("click", function(e) {   
    e.preventDefault();  
    // do something;       
});

More Information

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

Update

jQuery Docs - As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method.

Sample

$("#button_of_contact").delegate("input", "click", function() {
    e.preventDefault();  
    // do something; 
});

Answer 2

Assuming the content is loaded :

$("#bloc_load").on('click', '#button_of_contact', function() {
    console.log('click');
});

You will have to check the console to see the altered code with the loaded content, just right clicking and view source won't show the added content.