How to update div with jQuery from within div after it has loaded?

I am using jQuery to load a new page inside the div "example-placeholder"

<script>
function example_ajax_request() {
  var parameters = "ajax.html?";
  $('example-placeholder').load(parameters);
}
<script>

<div id="example-placeholder">
<p>Start typing text here and it will be replaced by the results list</p>
</div>

This loads the file ajax.html into the div as expected (I've left off the parameters after the '?' for clarity but they work fine)

What I want to do is reload ajax.html into the same div using a link generated within ajax.ht开发者_如何学Pythonml, but with different parameters.

For example, I have a list of results generated by ajax.html which display a bunch of paging links. I want to load, say, ajax.html?page=2 into the div "example-placeholder" without reloading the whole page again.

---

$('#example-placeholder a').live('click', function(e) {
   e.preventDefault(); 
   $('#example-placeholder').load($(this).attr('href'));
});

This script should bind the function to all links within example-placeholder after they have been created as the live() promises to bind the event handler to all matching elements now and in the future.

The preventDefault prevents the links from changing the window.location.

And the last line tries to update the example-placeholder with the contents of the page found using the link url.

---

inside your ajax.html page whenever you are ready to reload it do :

window.location = newUrl;

where newUrl could be a string like '/ajax.html?page=2&x=y'

---

try this:

<script>
function example_ajax_request(event) {

  var 
     parameters = "ajax.html?";

  if (event) {
    event.preventDefault();
    parameters = $(this).attr('href');
  }

  $('example-placeholder').load(parameters);

  return false;
}

$("example-placeholder").delegate("a", "click", example_ajax_request)

<script>

<div id="example-placeholder">
<p>Start typing text here and it will be replaced by the results list</p>
</div>

---

You could use the callback function to manipulate the html that gets inserted into the #example-placeholder element:

<script>
function example_ajax_request() {
  var parameters = "ajax.html?";
  $('example-placeholder').load(parameters, function(){
    // manipulate data
  });
}
<script>