jQuery load best practice

Question

I have a question about jQuery load best practice. Imagine the following situation:

$("#div").on('click', function() {
$('#result').load('test.html');
});

The code works fine, the load method executes, but now the loaded content can't be accessed by a jQuery plugin. I solved like this:

$("#div").on('click', function() {
$('#result').load('test.html', function(){
$('.element').plugin();
});
});

My question is simple, is there a better way to solve this situation ?

Answer 1

Ideally you would need to target the parent of the element with id="div" ... let's say a container <div id="wrap"> for this example. Then use .on() using the parent container as selector like:

$("#wrap").on("click", "#div", function() {
 $('#result').load('test.html');
});

then the loaded content can be accessed by your other plugin.

This format of using .on() actually replaced .live() since jQuery v1.7.x.

Eventually, you could also do

$("body").on("click", "#div", function() {
 $('#result').load('test.html');
});