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 的“live”用于“委托事件”，只要将新按钮插入文档中，它也将起作用：

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

请参阅http://api.jquery.com/live/以进一步了解“live”的工作原理。

于 2012-06-24T11:36:04.637 回答