jQuery-klik wordt meerdere keren uitgevoerd

Mijn probleem is het correct schakelen van de status van sommige knoppen. Ik gebruik jQuery Klik -gebeurtenissen. En het spijt me voor de lange post, maar ik weet niet waar het probleem zit en wil het niet per ongeluk missen. Ik zocht naar soortgelijke vragen, maar geen leek mijn probleem op te lossen.

Ik begin met het renderen van een div met een aantal taken die ik voor vandaag wil doen. En ik wil ze kunnen omschakelen als zijnde gedaan of niet.

{
    $('#currentDiv').hide();
    rewriteDivFromScratch();
    $('#eachday').show();
}

Waar de rewriteDivFromScratch knop-divs toevoegt aan HTML :

<div id="eachday"> .. </div>
    <div id="button-0" class="button"> <button class="btn btn-mini"> .. </button> </div>
    ..
    <div id="button-7" class="button"> <button class="btn btn-mini"> .. </button> </div>

function rewriteDivFromScratch() {
    el = $("#eachday");

   //get the HTML divs from Handlebars templating compilation
   //they're OK, I checked with inspector

   //This renderes nicely, no problem here.
    el.html(html);
}

Ik voeg een klikgebeurtenis toe aan knoppen om in hetzelfde bestand te schakelen met de bovenstaande:

$('.btn-mini').click( function(e) {
    e.preventDefault();
    var el = $(e.currentTarget); //the <button />
    el.toggleClass('btn-inverse');
}

En ik krijg geen toggle -effect ..

Nu, ik veronderstel dat dit gebeurt omdat er geen .btn-mini -klasse is tegen de tijd dat de $ (..). Klik wordt uitgevoerd . Dit is waarom ik een setInterval heb toegevoegd zoals:

var intervalId;//it's global in my JS file
function rewriteDivFromScratch() {
    ...
   //This renderes nicely, no problem here.
    el.html(html);
    intervalId = setInterval(check);//this fires only once, so seems OK
}

var check = function() {
    $('.btn-mini').click( function(e) {
        e.preventDefault();
        var el = $(e.currentTarget); //the <button />

        if (el.length)
            clearInterval(intervalId);
        else
            return;

       //It executes this toggle more than **15** times per
       //click on button.. Now, why is that?
        el.toggleClass('btn-inverse');
    }
};

Zoals ik in de vorige opmerking hierboven heb gezegd, is mijn probleem dat dat deel meerdere keren wordt uitgevoerd, niet een vast aantal keren per verversing, om een ​​patroon of zo te vinden.

De bovenstaande js-code bevindt zich in een enkele 'app.js' die ik eenvoudig opneem in mijn index.html zoals elk ander script.