jQuery scripts in the response of Ajax does not work

Question

I am using jQuery $.load() function to get content from server. the loaded content contain this:

<p id="p1">123</p>
<script>   
 $(document).ready(function(){
      $('#p1').html('ABC');
      alert($('#p1').html());
 });
</script>

changing text of paragraph to 'ABC' not affected to page but alert() display 'ABC'.

Answer 1

"#p" selector looks for a DOM element with id "p" - and there is nothing like that in here.

The correct selector would be "#p1".

Also, to set the text in a node, use text(): (see text(val) in http://docs.jquery.com/Manipulation )

$("#p1").text('ABC');

Answer 2

Er, wouldn't the document already be 'ready' when the content is loaded? Does the alert actually fire? If so, I agree with arnab_deka: use the .text() method.

Answer 3

If you're loading it in via .load() get rid of the surrounding $(document).ready(); bit. It's not necessary as the DOM is already loaded. Your script should just run as you'd expect.

Don't forget to add type="text/javascript" to your script tag to make sure it's not breaking anything.

If you still have trouble try just using the callback function of .load() eg.

  $("#somediv").load('some.html',{ /* empty data arg */ },function(){
    $("#p1").html('ABC');
  });