jQuery ONE函数多次重新激活

Question

I have many <div> each containing another div that's my button. I have an .one('click', '.button', function(){}); that activates on each click and increments a number in a single div elsewhere.

 var barPrimC = 25;
 var barPrimN = 6;
 var barPrimS = 5;
 var barPrimT = 48;

 var barSecMajC = 11;
 var barSecMajN = 2;
 var barSecMajS = 3;
 var barSecMajT = 19;

var incSL

$('.complete, .incomplete').click(function() {

    $('.classInfo').slideUp();

    if($(this).next().is(':hidden') == true) {

        $(this).addClass('on');

        $(this).next().show('slow');

        incSL = this;

        // ADD to List
        $(".shortAdd").one('click','.button', function(){

                $(this).text('Remove from Short List');

                $(this).parent().attr("class", "shortRemove");

                $(incSL).attr("class", "incompleteSL");

                $('.classInfo').slideUp();

                barPrimS++;
                barSecMajS++;

                var updateBarP = $(".bpS").find(".b-text-right").text(barPrimS);

                var cat = $(this).data("category");
                var catBar = $("."+cat).find(".bCommonS");
                var updateBarS = catBar.filter(".bsS").find(".s-text-right").text(barSecMajS);


        });

        // REMOVE from List
        $(".shortRemove").one('click','.button', function(){

                $(this).text('Add to Short List');

                $(this).parent().attr("class", "shortAdd");

                $(incSL).attr("class", "incomplete");

                $('.classInfo').slideUp();

                barPrimS--;
                barSecMajS--;

                var updateBarP = $(".bpS").find(".b-text-right").text(barPrimS);

                var cat = $(this).data("category");
                var catBar = $("."+cat).find(".bCommonS");
                var updateBarS = catBar.filter(".bsS").find(".s-text-right").text(barSecMajS);

        });

    }

 });

I was originally using .on but it was activating both of my methods (for ADD and REMOVE clicks) .

If I have :

<div>1st time div CLICKED (runs 1 time)</div>
<div>2nd time div CLICKED (runs 2 times)</div>
<div>3rd time div CLICKED (runs 3 times)</div>
<div>4th time div CLICKED (runs 4 times)</div>

So basically if barPrimS starts off at 5, it goes to 6 when the add click method is ran. When a separate add click method is ran, it goes to 8. Then to 11 then to 15.

I can't figure out why this is happening, please help! Should increment by only 1 (5, 6, 7, 8). I've tried barPrimS = barPrimS + 1 and other ways, but they all do the same.

Answer 1

I ended up removing the .shortAdd and .shortRemove .on('click') methods from within the parent click even, as suggested, and didn't nest them. I then combined the short and add as an if/else statement under the .shortAdd and simply .toggleClass() with the .shortRemove class, checking to see if it existed.

This fixed all errors for me.