Question

I have this jquery code :

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('<img src="images/loading.gif" />');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );

});
});

and this html :

<div class = 'badge_button'><a href='#' id = '1' class='more'>More</a></div>

My problem is that I have to click the “more” button many times before it actually fires. This happens on and off. Is it because of the default behavior or does it have to do with href='#'?

Answer 1

I think not adding return false; is the problem. You need it because the href=# reloads the page.

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('<img src="images/loading.gif" />');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );
        return false;
});
});

Hope it helps…