jQuery code in ajax loaded content only runs once

I have been looking around SO for a while and haven't been able to find anything that matches my issue, which I'm not even sure I can explain that well, so take that for what it's worth.

I have a page that loads content into a div via AJAX (using the .load() method). There are several links in the navigation, meaning the content will change while navigating the site without refreshing the entire page.

(Actually, to be honest, I just cribbed the DocTemplate layout [http://css-tricks.com/examples/DocTemplate/] from css-tricks.com. Apparently while I'm not a re-invent the wheel type programmer, I am a bash my head against the wheel incessantly to get it to work programmer.)

So, index.php loads up some DB content in a div. There is also a jQuery UI modal input form on index.php. Essentially, the only HTML on the page is an empty div and a form. This all开发者_如何学C works fine, until I call up another page, then go back to index.php. The DB content is not loaded, and my form is shown there in all its naked glory. I know why this is happening. The page was not refreshed, nothing kicked off the code to load the content and hide the form.

My question is, how can I ensure that the AJAX .load() and the .dialog() will run when loading index.php again? Is it even possible?

Thanks, and my apologies for the length. I get verbose when I'm confused.

An easy and quick solution is to disable caching of index.php. You can do that by sending the appropriate Http headers. This way your page will always reload.

your question is not very easy to understand. It seems you are using the back button of the browser to go back to your index.php file ?

When you hit the back button, the browser reloads the page as it was originally loaded (that is in the state it was before any user interaction).

So it is normal that the browser shows the naked page.

It you want to handle the back button and more generally the history of the browser in an ajax application, you can use of the existing jquery history plugins, like this one

I hope it will help you,

Jerome Wagner

You can add some logic so that when your page has finished loading, you're checking to see whether the dynamic region is populated. If it's not, then run your .load() routine.

$(document).ready( function() {
    if( $('div#theDIV').find('something_that_should_be_there').length == 0 ) {
        $('div#theDIV').load('etc,etc')
    }
})

I got it working. I have to manually re-bind the events in the .load() call-back function when the content is loaded again.

The problem is that .bind() binds only elements that exist at the moment .bind() runs. Since you load more stuff with ajax later, after .bind() ran, the new elements won't have the event bound. There are 2 workarounds to this:

• either, like you did, rebind the elements after each ajax load
• or use .live() instead of .bind().
  The syntax for .bind() is like
  $('element').bind('some-event', function() {blabla});. 'some-event' is whatever event you're binding: click/submit/mouseover/etc.
  .live() is absolutely the same:
  $('element').live('some-event', function() {blabla});

Note that there are shorthand notations for common events:

$('element').click(function() {blabla}); // These are equivalent to   
$('element').bind('click', function() {blabla}); // You need to use .on()  
$(document).on('click', 'element', function() {blabla});