jQuery的ONCLICK不会发生第二次
-
20-09-2019 - |
题
我有点困惑,为什么这不工作;我认为,因为我加入了类和它不重新添加到收藏我不知道。
这在jsbin http://jsbin.com/ayije 虽然代码低于也。
无论哪种方式,我只能得到动作发生的元素上一次
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.optional').click(function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
$('.selected').click(function () {
$(this).removeClass('selected').addClass('rejected');
return false;
});
$('.rejected').click(function () {
$(this).removeClass('rejected').addClass('optional');
return false;
});
});
</script>
</head>
<body>
<style>
a {padding:2px;color:white;}
.optional {background-color:blue;}
.selected {background-color:green;}
.rejected {background-color:red;}
</style>
<div id="tagContainer">
<a href="#" class="rejected">a</a>
<a href="#" class="optional"">b</a>
<a href="#" class="selected">c</a>
</div>
</body>
</html>
解决方案
这是因为在点击处理只适用于那些在匹配文档加载的元件。您应该使用一个单独的类,以确定所有的链接,然后建立一个单一的点击处理,看起来在该环节都有类,然后做出适当的类转换。
$(document).ready(function () {
$('.clickable').click(function () {
var $this = $(this);
if ($this.hasClass('optional')) {
$this.removeClass('optional').addClass('selected');
}
else if ($this.hasClass('selected')) {
$this.removeClass('selected').addClass('rejected');
}
else if ($this.hasClass('rejected')) {
$this.removeClass('rejected').addClass('optional');
}
return false;
});
});
<div id="tagContainer">
<a href="#" class="clickable rejected">a</a>
<a href="#" class="clickable optional">b</a>
<a href="#" class="clickable selected">c</a>
</div>
其他提示
不知道,如果你已经知道这件事或不....检查的的 .live()功能。这样一来,你可以做这样的事情。
$('.optional').live('click', function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
然后,你就不必担心在文档加载不存在的类。由于类更改的元素,它们就会自动绑定。
您可以更改您这样的代码
$(document).on("click", ".clickable", function(){
var $this = $(this);
if ($this.hasClass('optional')) {
$this.removeClass('optional').addClass('selected');
}
else if ($this.hasClass('selected')) {
$this.removeClass('selected').addClass('rejected');
}
else if ($this.hasClass('rejected')) {
$this.removeClass('rejected').addClass('optional');
}
return false;
});
您也可以改变你的点击处理程序,以现场click处理程序:
$(document).ready(function () {
$('.optional').live('click',function () {
$(this).removeClass('optional').addClass('selected'); return false;
});
$('.selected').live('click',function () {
$(this).removeClass('selected').addClass('rejected'); return false;
});
$('.rejected').live('click',function () {
$(this).removeClass('rejected').addClass('optional');
});
});
不隶属于 StackOverflow