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

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.