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.

1
ook, als je suggesties hebt om mijn js-codering te verbeteren, vertel het dan. Ik wil goede code schrijven en zal binnenkort proberen al mijn code te migreren naar mvc, met backbone. Bedankt!
toegevoegd de auteur Andrei Petre, de bron
Je weet dat er een jQuery.toggle() is toch?
toegevoegd de auteur Kyle Hotchkiss, de bron

1 antwoord

gebruik gewoon jQuery's 'live' voor een 'gedelegeerde gebeurtenis', die ook werkt wanneer nieuwe knoppen in het document worden ingevoegd:

$('.button').live('click', function(){
  //button clicked
});

Zie http://api.jquery.com/live/ voor meer uitleg over hoe 'live' werkt .

1
toegevoegd
bedankt! dit werkte. Ik weet echter niet waarom met mijn oude code met setInterval het vreemde gedrag aan de hand was.
toegevoegd de auteur Andrei Petre, de bron