Question

Here is my function:

$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    $('div#loading').fadeIn();
    $('div#content').load('pages/'+pageLoad);
});

I have a div with the id content on my page which displays the called pages, however it seems to load the pages twice. I know this because one of the pages displays something in a shuffled order, and I can see it load twice.
Interestingly enough, it works fine when I add

throw new Error('something here');

to the end of the function like so:

// LINK CLICK
$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    $('div#loading').fadeIn();
    $('div#content').load('pages/'+pageLoad);
    throw new Error('bla bla');
});

but anything else always causes it to fire twice. I tried rearranging things and so forth, but it still persists. My links that use this function are simple:

<a href="#" class="link" data-page="whatever.php">link</a>

Only one instance of jQuery 1.7.2 is being called. I am clueless as to what to do. I have also tried the live() and on() functions and experienced the exact same results.

!!! EDIT !!!

$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    console.log('clicked');
    $('div#loading').fadeIn(function() {
        console.log('faded');
        $('div#content').load('pages/'+pageLoad+'.php', function() {
            console.log('loaded');
        });
    });
});

now… here is where this REALLY gets interesting. I did NOT change one of my links from

data-page="page.php"

to just

data-page="page"

(since the .php is now directly included in the function)

When I click any of links that should work as intended, I get loaded, clicked, then faded in my error console. Only one of each. The page loads twice. However, when I click on the link that shouldn’t work (because it contains the .php) IT STILL WORKS!! I get the three words and an error in my error console like so:

layout.js:25 clicked
layout.js:27 faded
jquery.min.js:4 GET pages/login1.php.php 404 (Not Found)
layout.js:29 loaded

but the page still loads in the content div EVERY TIME I click it, and it only loads once like it should…

So from what I have established here, there is some weird phenomenon occurring where jquery fetches page.php and page.php.php when I click the link

<a href="#" class="link" page="login1.php">

the proof is displayed when I try and fetch a page that isn’t even on my server using the following link:

<a href="#" class="link" data-page="no">no</a>

, where I am presented with 2 errors:

jquery.min.js:4 GET pages/no 404 (Not Found)
jquery.min.js:4 GET pages/no.php 404 (Not Found)

How is this even possible? Why would jquery be doing this? Can anyone even attempt to explain what is going on here?

Answer 1

The best way to find out why this happens (it does seem like you have tried to do all you can to prevent the event bubbling) is to set a breakpoint inside the click handler and check the stack trace up to that point.

If it runs twice, on the second run you should get an idea why it was fired yet again.

By throwing an exception I guess you’re break out of some jQuery loop.