jQuery ajax works once, but each time thereafter loads the href through browser

I have a click handler that reads the href attribute of an a tag and loads the new content via ajax. The function returns false so it doesn't follow the href url. This works once, but each time thereafter, the function does not appear to get called and the content is not loaded asynchronously, but instead follows the link in the browser.

$ ("document").ready( function () {
          $(".post_update").click( function () {
              $("#dashboard_content").html(ajax_load).load($(this).attr('href'));
              return false;
          });
});

<a href="{{ p开发者_StackOverflow中文版ath('post_update', {"id":post.id}) }}" class="post_update">Edit</a>

you should not use document as a string its an object itself try the belwo code.

Since the link is inside dashboard container you should use live in this case.

$(document).ready( function () {
          $("a.post_update").live('click',  function () {
              $("#dashboard_content").html(ajax_load).load($(this).attr('href'));
              return false;
          });
});

If .post_update is inside #dashboard_content, the problem is that the element to which the event handler was bound, is now gone. The simplest solution, is to use the jQuery.live method. So your code would look like:

$(document).ready(function () {
    $(".post_update").live("click", function (e) {
        $("#dashboard_content").html(ajax_load).load($(this).attr('href'));
        return false;
    });
});