jquery, how to use multiple ajax requests?

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

You should use .live because you are adding data dynamically

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

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

try handling newly loaded form $('#sss').submit(function(evt) {});