功能只工作一次

时间:2015-01-24 12:40:52

标签: jquery

为什么我的代码只能在同一个元素上运行一次?

这是我的按钮:

<button class="btn-warning line-focus" id="1">Focus</button>
<button class="btn-default line-normal" id="2">Normal</button>
<button class="btn-warning line-focus" id="3">Focus</button>
<button class="btn-warning line-focus" id="4">Focus</button>
<button class="btn-warning line-focus" id="5">Focus</button>

这是我的jQuery脚本:

$(".line-focus").live('click', function() {
    //unfocus line
    var lineid = this.id;
        $(this).removeClass("btn-warning");
        $(this).removeClass("line-focus");
        $(this).addClass("line-normal");
        $(this).addClass("btn-default");
        $(this).text('Normal');
});


$(".line-normal").live('click', function() {
    //focus line
    var lineid = this.id;
        $(this).removeClass("btn-default");
        $(this).removeClass("line-normal");
        $(this).addClass("line-focus");
        $(this).addClass("btn-warning");
        $(this).text('Focus');
});

我错了什么?应该可以将相同的按钮聚焦/取消聚焦一百万次

1 个答案:

答案 0 :(得分:3)

由于您要删除点击的元素类,因此您可以再次点击,而您将无法获得您期望的内容。

使用event delegation方法:

$(document).on('click',".line-focus", function() {
    //unfocus line
    var lineid = this.id;
        $(this).removeClass("btn-warning");
        $(this).removeClass("line-focus");
        $(this).addClass("line-normal");
        $(this).addClass("btn-default");
        $(this).text('Normal');
});


$(document).on('click',".line-normal", function() {
    //focus line
    var lineid = this.id;
        $(this).removeClass("btn-default");
        $(this).removeClass("line-normal");
        $(this).addClass("line-focus");
        $(this).addClass("btn-warning");
        $(this).text('Focus');
});

此外,我建议您使用on而不是live()方法,因为您使用的是1.10版本的jQuery。