JQuery and load (). Unable to change internal HTML in loaded class

Question

I am trying to change the internal HTML in a loaded div with this function:

$("#container").load("site.php");

In site.php , I have <div class="users_count"> and I would like to put some text in it. I am trying to use $(".users_count").html("TEST") , but this is not possible because jQuery does not see the .users_count class.

I heard about jQuery on() and live() , but this requires some kind of click, keyup etc... event click, keyup etc...

I need to put some text in this div without any event - just do it in my function without user action.

Answer 1

You can use the full load() callback:

If a "full" callback is provided, it is executed after post-processing and pasting the HTML.

 $("#container").load("site.php", function() { $(".users_count").html("TEST") }); 

Hope this helps.

Answer 2

$.fn.load() is asynchronous, you can use the complete callback:

 $("#container").load("site.php", function(){ $(this).find('.users_count').html('TEST'); }); 

$(this).find('.users_count') isntead just $('.users_count') , because it’s better to set the appropriate context, in most cases you wouldn’t want the target elements to be descendants of the loaded content, depending on the used selector . In your case, this will not change anything, but sometimes who knows ...

Answer 3

You want to do things when the download is complete. This is done with a full callback.

 $( "#result" ).load( "ajax/test.html", function() { alert( "Load was performed." ); // Do your stuff here }); 

Answer 4

I have another solution that does not require on() in live() from jQuery.

When I do $("#container").load("example.php"); in example.php right before </body> , I put a <script type ="text/javascript" src="myFunctions.js"></script> , which contains all my functions that I want to use for my classes in example .php.

Now my jQuery functions have no problem finding classes or id, as they load from my example.php .