为什么我的代码只能在同一个元素上运行一次?
这是我的按钮:
<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');
});
我错了什么?应该可以将相同的按钮聚焦/取消聚焦一百万次
答案 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。