a 标签 javascript:void(0) 绑定click事件处理异常。。。

壹贰叁 发布于 2016/08/26 10:03
阅读 595
收藏 1

这个是a 标签的内容

<a href="javascript:void(0);" onclick="getComm('test')" class="">test</a>

我在click 函数里面加了

  $("#proName li a").click(function(e){
        e.preventDefault();
        $("#proName li a").removeClass("a");
        $(this).addClass("a");
    });
然后这段代码没有执行,想问问大神们,这是个什么情况引起的。。。

加载中
0
总被尿憋醒
总被尿憋醒
$("#proName li a") 这个是啥??代码里没有
总被尿憋醒
总被尿憋醒
回复 @壹贰叁 : 标签上已经是onclick触发getComm了,getComm方法里直接写你想实现的东西就好,为什么还要再加一个click事件?
壹贰叁
壹贰叁
proName 是ul 的id 这是选择这个ul 里面li 的 a 标签
0
总被尿憋醒
总被尿憋醒
$("#proName li a").click(function(e){
        e.preventDefault();
        $("#proName li a").removeClass("a");
        $(this).addClass("a");

    });

--> 这段只是给a加了个点击事件,并不会立即执行,事件追加完成后再次点击才会执行。但是你再次点击的话,又重新走了getComm方法,方法里又重新绑定点击事件。。。如此循环,也就是说,点击a后,调用getComm方法,而getComm方法里永远都在绑定事件,而不是在执行

壹贰叁
壹贰叁
但是我去掉$("#proName li a").click 依旧没有走到那段代码。。
0
huison
huison

请问这有啥问题???

<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
a.a{color:red;}
</style>
<script>
$(document).ready(function(){
    $("#proName li a").click(function(e){
        e.preventDefault();
        $("#proName li a").removeClass("a");
        $(this).addClass("a");
    });
});

function getComm(str) {
    console.log(str)
}
</script>
</head>
<body>
<ul id="proName">
<li><a href="javascript:void(0);" onclick="getComm('test')" class="">test</a></li>
<li><a href="javascript:void(0);" onclick="getComm('test1')" class="">test</a></li>
</ul>
</body>
</html>



huison
huison
回复 @壹贰叁 : 你要的效果其实就是那些东西,你对比一下,看看是不是其他代码影响了,打开firebug或chrome的检查,看一下,报什么错。
壹贰叁
壹贰叁
回复 @huison : 。。。不是的,我想做的效果是设置class的,但是class并没有设置上去。。。
huison
huison
回复 @总被尿憋醒 : 并且只会阻止默认事件。我刚发的代码在线运行了,并没有问题,他说没有执行,我猜测是getComm函数未定义。
huison
huison
回复 @总被尿憋醒 : 在上个问题里面,他a链接并没有加javascript:void(0);,我给他写演示代码里面加上的,不然会跳转。
总被尿憋醒
总被尿憋醒
e.preventDefault(); --> 会组织事件,去掉
0
总被尿憋醒
总被尿憋醒
<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.a{color:red;}
</style>
<script>
function getComm(_this, str) {
	$('#proName a').removeClass('a');
	_this.className = 'a';
    console.log(str)
}
</script>
</head>
<body>
<ul id="proName">
<li><a href="javascript:void(0);" onclick="getComm(this, 'test')" class="">test</a></li>
<li><a href="javascript:void(0);" onclick="getComm(this, 'test1')" class="">test</a></li>
</ul>
</body>
</html>




看看是不是你要的效果

0
skhuhu
skhuhu
定义了2个onclick 事件····· 行级的优先级最高···把你之前的那个覆盖了
返回顶部
顶部