Question

我的问题是正确切换 - 某些按钮的状态。我使用 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');
}

我得到没有切换效果..

现在，我想这是因为$（..）。点击执行时没有 .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中。

Answer 1

只需使用jquery的'live'作为'委托事件'，只要在文档中插入新按钮，它就会起作用：

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

请参阅http://api.jquery.com/live/，了解“直播”的工作原理。

jquery点击多次执行

1 个答案: