我正在用jQuery尝试设置一个div的“点击”方法来获得意想不到的结果.请参阅
this jsfiddle.请确保打开控制台窗口.单击该单词几次,并观看控制台输出.当它只应该被调用一次时,点击函数被多次调用.
注释掉的代码在最后工作很好.我做错了吗？我是jQuery的新手.
以下是代码：
function toggleDiv(status)
{
console.log("toggleDiv(" + status + ")");
if (status) {
$("#test").html("Goodbye");
}
else {
$("#test").html("Hello");
}
$("#test").click(function() {
toggleDiv(!status);
});
// Non-jquery method works fine....
//document.getElementById("test").onclick = function () {
// toggleDiv(!status);
//}
}
更新：看起来有很多方法来皮肤这只猫.这里的真正问题是我不明白jQuery“点击”功能会增加另一个处理程序.我以为它替换了当前的处理程序.
解决方法
每当你继续点击它(这又创造了更多的事件),你正在设置一个新的.click()eventHandler.在旁注,尝试永远不要在DOM元素上使用onclick / onmouSEOver / onmouSEOut / etc事件.在互联网浏览器中,这些创建脚本块(您可以看到您是否使用Visual Studio).
看起来你正在试图实现这一点：
$("#test").on('click',function() {
var this$ = $(this),_status = !!this$.data('status'); // force to boolean
// ^will default to false since we have no data-status attribute yet
this$.html(_status ? 'Hello' : 'Goodbye')
.data('status',!_status);
});
