Question

i have this situation inside xxx.php:

<form id="s">
<input id="q"/>
<input type="submit" href="Search!"/>
</form>
<div id="r"></div>

inside the foo.php i have another form:

<form id="ss">
<input id="qq"/>
<input type="submit" href="Search!"/>
</form>
<div id="rr"></div>

and inside the yyy.php i have another form:

<form id="sss">
<input id="qqq"/>
<input type="submit" href="Search!"/>
</form>
<div id="rrr"></div>

inside javascript.js i have :

$('#s').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: 'foo.php',
data: {
    query: $('#q').val()
  },
success: function(data) {
    $('#r').html(data);
  }
});
return false;
});

$('#ss').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: 'yyy.php',
data: {
    query: $('#qq').val()
  },
success: function(data) {
    $('#rr').html(data);
  }
});
return false;
});

what happens is that when i submit the first form the second one load in, so now i have 2 forms (as expected) but when i submit the second form the third one doesn’t load using ajax, but it redirects to it by refreshing.

so basically i need to do as many ajax loads as i can

any ideas?

thanks

Answer 1

You need to use Live events for things you dynamically load in so in your case:

$("#ss").live('submit', function (e) {
   // Code here
});

You only need to use live events for things that are not always in the DOM. If you request pages through ajax and then intent to use them you will need to use live events.

See : http://api.jquery.com/live/
For a little more detail