为什么我的 jquery.load() 函数不工作？

Question

I have a button on my site which, when clicked on, should load html inside a div container.

I'm using the following code for the button:

<div id="nextnr1"><a href = "#">Next&gt;&gt;</a></div>

The following code to execute the loading when someone clicks on the div:

<script type="text/javascript">
    $(document).ready(function() {
        $("#nextnr1").mousedown(function() {
            $("#Container").load("wrappers.php?currenttab=1&shift=1");
        });
    });​
</script>

This is the code for the container where the HTML is loaded into:

<div id="Container"></div>

The problem is that all of the above code is working most of the time. Only once in a while the function .load is not doing his job. This is for similar circumstance because it is about the same page.

I checked that when there is a click the function was called so: $(document).ready and $("#nextnr1").mousedown(function() {..} are doing their job. Only .load is NOT doing its job because I checked that there was no HTTP request sent to the server.

If anyone can help me out with this problem I would be very very thankful.

UPDATE 1

I tried the message box (see code below) and it shows that when the load was not executed it also didn't show the message box Load was performed. I also saw that after 2/3 minutes suddenly the message box showed up and it reloaded. However it does work but sometimes there is a huge delay.

$(document).ready(function() {
   $("#renextnr2").click(function() {
      $("#Container").load("wrappers.php?currenttab=2&shift=1", function() {
           alert("Load was performed.");
      });
   });
});

Answer 1

first off, try using 'click' instead of mousedown.

second, try hooking the 'click' event to the link instead of the div:

<div><a id="nextnr1" href = "#">Next&gt;&gt;</a></div>

Answer 2

you may need to stop the event from propagating/default processing:

<div><a id="nextnr1" href="#">Next&gt;&gt;</a></div>

<script type="text/javascript">

$(document).ready(function() {
$("#nextnr1").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $("#Container").load("wrappers.php?currenttab=1&shift=1");
});});

</script>

Answer 3

First thing to start off with is to add an alert to debug whether the event is even being fired, as shown below. This will give better insight on what area to look closer at to determine the problem.

$('#Container').load('wrappers.php?currenttab=1&shift=1', function() {
  alert('Load was performed.');
});

Answer 4

I added a randon number at the end of the URL which solved the problem.

Answer 5

The jquery load() function can behave inconsistently if there is a problem in your server-side code (PHP).

I had an issue where load() was working in my local site, but was not working consistently on my host. It turned out I had written some bad PHP that didn't cause any problem in my local environment, but caused problems when I deployed to the host.

Check to make sure the URL you are loading with javascript can load in your browser if you visit the URL directly. That will tell you if it's a javascript or server-side issue.