How to re-enable click function after remove and add class?

Question

I need to re-enable click function after remove and add class, here is script example

function prev() {
var click_lf = 0;
var click_dsb_lf = 0;


$('.sl-lft').on('click', function () {

    var curr = parseInt($('.active-thumb').children('span').text().charAt(0));
    click_lf += 1;
    click_dsb_lf += 1;

    if (click_dsb_lf <= 1) {
        sc_right.removeClass('sl-lft-off').addClass('sl-lft').on('click'); // here is a problem
        sc_left.removeClass('sl-lft').addClass('sl-lft-off').off('click');
        // console.log('event');
        console.log(click_dsb_lf);

    }

    if (click_lf == 3 || curr < 3) {
        thmbs_wrp.animate({scrollTop: '-=' + '149px'}, 500);
        click_lf = 0;
    }


});

}

prev();

score 1 · Answer 1 · answered Oct 12 '15 at 07:32

1

You need to use event-delegation approach

Just Use:

$('body').on('click','.sl-lft', function () {

instead of:

$('.sl-lft').on('click', function () {

answered Oct 12 '15 at 07:32

Muhammad Bilal

2,106
1
15
24

score 1 · Accepted Answer · answered Oct 12 '15 at 07:32

You can use event delegation to solve the problem since the selectors will be evaluated dynamically in the case of event delegation

function prev() {
    var click_lf = 0;
    var click_dsb_lf = 0;


    $(document).on('click', '.sl-lft', function () {

        var curr = parseInt($('.active-thumb').children('span').text().charAt(0));
        click_lf += 1;
        click_dsb_lf += 1;

        if (click_dsb_lf <= 1) {
            sc_right.removeClass('sl-lft-off').addClass('sl-lft');
            sc_left.removeClass('sl-lft').addClass('sl-lft-off');
            // console.log('event');
            console.log(click_dsb_lf);
        }

        if (click_lf == 3 || curr < 3) {
            thmbs_wrp.animate({
                scrollTop: '-=' + '149px'
            }, 500);
            click_lf = 0;
        }
    });
}

prev();

for example `if (click_lf == 3 || curr < 3) { thmbs_wrp.animate({ scrollTop: '-=' + '149px' }, 500); click_lf = 0; }` — Val Do, Oct 12 '15 at 07:38

How to re-enable click function after remove and add class?

2 Answers2