使用类选择器时,jquery click事件多次触发

时间:2010-01-07 23:11:06

标签: jquery html css-selectors click

这是我的HTML

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

我用这段代码创建了一个jquery事件绑定:

    jQuery(".myLink").click(function(event) {

         var myId = this.id;

         location.href = '/x/y?myId=' + myID;
   });

当我点击其中一个链接(li项目)时。我认为这会触发一次点击事件,当我调用this.id时,我会得到我点击的项目的id。

但它看起来像是:

   jQuery(".myLink").click(function(event) {
即使我只是点击一个链接,

一遍又一遍地开火。我在他们的firebug中放了一个调试器语句,看到这个被一遍又一遍地调用。

有什么想法吗?

10 个答案:

答案 0 :(得分:69)

我遇到了类似的问题,我的解决方案是在声明click事件之前取消绑定click事件。没有多大意义,但我不知道多个事件是如何附加到单个HTML元素的。 (我的HTML看起来有效;))

  

$('。remove_lkc')。unbind('click')。click(function(){..........

答案 1 :(得分:18)

如果您关闭<li>代码,则可以解决问题。我刚刚对它进行了测试,并对其进行了修正。 应该是

<li> ... </li>
<li> ... </li>

<li>
<li>

答案 2 :(得分:14)

在我的情况下,我有多个标签呈现相同的部分,每个部分都有$(document).ready()调用,它将click事件绑定三次。

答案 3 :(得分:9)

添加这两行解决了它:

event.stopPropagation();
event.preventDefault();

来源: http://code.google.com/intl/en/mobile/articles/fast_buttons.html

答案 4 :(得分:6)

尝试将id属性的值放在引号中。当您放置id=1时会发生奇怪的事情。

另外,你怎么知道它多次发射?将此行放在函数的顶部,然后观察firebug日志以查看发生了什么:

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );

编辑:

嘿,正如其他人指出的那样......确保你的标记也是有效的:P

答案 5 :(得分:6)

我的问题是,当我创建<div>时,我在循环中进行了事件绑定,从而为事件中的每个项目反复添加事件。这只是需要仔细检查的东西。

答案 6 :(得分:4)

在我的情况下,javascript必须与ajax请求一起呈现。

$(document).ready(function(){
    $(document).on('click','.className',function(){alert('hello..')})
});

事件多次启动..使用 .off()删除所有以前的事件处理程序。 (使用.on()中使用的相同签名

$(document).ready(function(){
    $(document).off('click','.className');
    $(document).on('click','.className',function(){alert('hello..')});
});

希望它有所帮助...

答案 7 :(得分:1)

从发布的HTML看起来,myLink DIV似乎是嵌套的,导致事件被多次触发,因为每个DIV都获得了点击。如上所述,请确保标签格式正确。每行末尾的DIV标签是否应该关闭标签?

答案 8 :(得分:1)

确保您没有多次包含js脚本。 如果您在服务器站点中使用框架,请确保布局和模板不包含相同的脚本。

答案 9 :(得分:0)

我认为大多数时候它会多次触发,这是我们如何将其置于循环中或在我们多次绑定而导致多次触发的情况下的。检查您的代码,并确保您没有多次绑定该事件。

in my case i have below event
--------------------------------------------------------------------
    bindSelectYesNoHeathCare = () =>
    {
        $(document).on('click', '.healthCareTypeClass', function (event)
    }

   showHideDivs = (id: number,
                    changeNavigationMenu: boolean = true,
                    loadDataFromServer:boolean = false,
                    validateHealthCareScreens = false) =>
    {
       ChildMgr.bindSelectYesNoHeathCare(); 
    }

我将它与另一个事件绑定在一起,在每次单击时,它又重新绑定,导致触发多次。