1

私の問題は、いくつかのボタンの状態を正しくトグルすることです。jqueryクリックイベントを使用しています。そして、長い投稿で申し訳ありませんが、どこに問題があるのか​​ わかりません。誤って見逃したくありません. 同様の質問を検索しましたが、問題を解決するものはありませんでした。

今日やりたいタスクを含むdivのレンダリングを開始します。そして、それらを完了したかどうかを切り替えることができるようにしたいと考えています。

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

rewriteDivFromScratchがボタン div を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);
}

ボタンのクリックイベントを追加して、上記のものと同じファイルに切り替えます。 

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

そして、トグル効果はありません..

これは、$(..).clickが実行される時点で.btn-miniクラスが存在しないために発生すると考えられます。これが、次のようにsetIntervalを追加した理由です。

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');
    }
};

上記の最後のコメントで述べたように、私の問題は、パターンなどを見つけるために、更新ごとに一定の回数ではなく、その部分が複数回実行されることです。

上記の js コードは単一の「app.js」にあり、他のスクリプトと同様に index.html に含めるだけです。

4

1 に答える 1

1

「委任されたイベント」にjqueryの「ライブ」を使用するだけで、新しいボタンがドキュメントに挿入されるたびに機能します。

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

「ライブ」の仕組みの詳細については、http://api.jquery.com/live/を参照してください。

于 2012-06-24T11:36:04.637 に答える