I uses jQuery Ajax a lot to update a div in HTML pages. The ajax is included in $(document).read(...) such as the following:

```
$(document).ready(function() {
  $('a.button').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});

```

However, after clicking the button, Ajax sometimes fails and it displays the result in the whole page, instead in the 'content' div. This happened frequently when the page is loading or refreshed. But I suppose that $(document).ready(...) would prevent this from happening. What went wrong?