$(document).ready() not executed for ajax loaded content

Question

What could be reasons not to execute document.ready within returned partial page? It works fine 2 times, but on 3rd time nothing happens after update of html:

alert(html);
alert($(PopUpItem));
$(PopUpItem).html(html);
alert('in set popup html completed'); 

I have all alerts executed, PopupItem and html has correct values. I am using JQuery to execute server call by $.post.

Also, Can I have error handler to catch if some syntax error happened?

Answer 1

Within your returned AJAX, you shouldn't need a $(document).ready() call. The DOM has already been loaded. Something simple like this should do the trick:

<script type="text/javascript">
// Do something here.
</script>

Answer 2

document.ready is only executed when the page is originally loaded.

In order to have an error handler, you can use the more $.ajax to do your ajax calls (http://api.jquery.com/jQuery.ajax/).

Answer 3

To bind events to any asynchroneously generated elements you should take a look on livequery: http://docs.jquery.com/Plugins/livequery

Answer 4

Are you saying that the html string passed to $(PopUpItem).html() contains a <script> block with a document.ready(function() { ... }); inside it?

If so the reason the ready event handler doesn't fire is that the script doesn't run at all. See this question which has the same ‘third-time’ behaviour.

Don't load <script> tags into markup. It's not at all reliable cross-browser, jQuery or no jQuery.