CODEWITHSUNDEEP
jquery
rihanna
rihanna

Reputation: 21

jquery click function conflicts

I have a problem when putting a click function inside a click function. I also tried mousedown(), but the same problem. When else is executed and click the button. The click function is running twice.

$('.tableData').click(function(){
    if($('tr.trSelected').length > 1) {
        $('.box-edit').addClass('btn-disabled');
        $('.box-info').addClass('btn-disabled');

        $('.nav-edit').unbind('click');
        $('.nav-info').unbind('click');

    }
    else {
        $('.box-edit').removeClass('btn-disabled');
        $('.box-info').removeClass('btn-disabled');

        $('.nav-edit').bind('click', function() {
            $('.sub-nav-edit').slideToggle(200);
            $('.box-edit').toggleClass('sub-nav-active');
        });
    }
});

Upvotes: 0

Views: 330

Answers (2)

Jan Thomä
Jan Thomä

Reputation: 13604

Maybe you should put that if statement into your "click" function and test there if the button is currently selected or not. That way you don't need to unbind/rebind functions.

Upvotes: 0

Gideon
Gideon

Reputation: 18491

You need to tell it, to stop handling bubbling the click event , by using stopImmediatePropagation (of the event parameter, which I've added e).

$('.tableData').click(function(e){

    if($('tr.trSelected').length > 1) {
        $('.box-edit').addClass('btn-disabled');
        $('.box-info').addClass('btn-disabled');

        $('.nav-edit').unbind('click');
        $('.nav-info').unbind('click');

    }
    else {
        $('.box-edit').removeClass('btn-disabled');
        $('.box-info').removeClass('btn-disabled');
        e.stopImmediatePropagation();
        $('.nav-edit').bind('click', function() {
            $('.sub-nav-edit').slideToggle(200);
            $('.box-edit').toggleClass('sub-nav-active');
        });
    }
});

Upvotes: 0

Related Questions