Question

My jQuery Code is as follows:

$('.sidebar_options_arrow').click(function() {
    id = $(this).attr('rel');
    toggled = 0;
    if(toggled == 0) {
        toggled = 1;
        $('#'+id+'-info').slideToggle('fast', function() {
            alert('1');
            toggled = 0;
        });
        $('.chat_sidebar_desc').not($('#'+id+'-info')).slideUp('fast');
    }
    return false;
});
$('#chat_sidebar ul li').click(function() {
    id2 = $(this).attr('rel');
    if(loading == 0) {
        loading = 1;
        $('#chat_main_container').fadeOut(function() {
            $('#loading').fadeIn(function() {
                if(id2 == 0) {
                    $('#chat_main_container').empty().load('chat/start.php');
                    $('#loading').delay(500).fadeOut(function() {
                        loading = 0;
                        $('#chat_main_container').fadeIn();
                    });
                }else{
                    $('#chat_main_container').empty().load('chat/index.php?roomid='+id2);
                    $('#loading').delay(500).fadeOut(function() {
                        loading = 0;
                        $('#chat_main_container').fadeIn();
                    });
                }
            });
        });
    }
    return false;
});

The issue I’m having is as follows:

• I click sidebar_options_arrow and it works fine and slideToggle’s my element.

• I then click an li on the same page and let it load a page.

• I click sidebar_options_arrow again and it toggles twice, one after another. E.g. in this example, it would toggle it to show the element then toggle it to hide it.

• If I then click another li on the page, and then click the sidebar_options_arrow again, it will toggle 3 times. It’s an ongoing pattern, I’ve tested it to 10 toggled and confirmed it by making it alert something whenever it toggles.

I would really appreciate any help I can get on this, it’s extremely annoying!

Thanks in advance.

Answer 1

It’s very likely that your code above is running multiple times, probably from the AJAX load, meaning the $('.sidebar_options_arrow').click() code is getting an additional handler each time you do load. To see this in action, simply add an alert("binding"); above your first line: $('.sidebar_options_arrow').click(function() {.

The AJAX loaded content should not re-run handlers unless it needs to, as you see in this case it’ll cause some unwanted duplicate/overlapping behavior because of each load adding a new set of the same handlers.

You’ll want to move the JS portion out of the content you’re loading so it doesn’t re-run, or prevent it another way. In the worst case (I recommend it not running at all, as that’s cheaper, but if you have to….) you can simply call .unbind() before .click() when attaching the handler. Note: if you have multiple handlers (potential user scripts, etc…anything here), you’ll need to name that function and call .unbind("click", functionName) explicitly to be safe.