jQuery-.on('click'，...)事件在Firefox中触发两次 [英] jQuery - .on('click', ...) event fires two times in Firefox

问题描述

我有一个搜索字段，用户在其中输入字母，后台的ajax脚本执行搜索.结果显示在ul-li列表中.用户可以单击哪个类是"search_list_item".单击后，用户名/ID将复制到另一个div(msg-receiver div)中.

我的行为很奇怪，因为在Safari中一切正常.在firefox中，点击事件似乎被触发了两次，因为我在#msg_receiver-div中两次看到了用户名.

代码如下:

$(document).ready(function(){
    $('#searchresult').on('click', 'li.search_list_item', function(){

    var msg_receiver_content = $('#msg_receiver').html();

    $('#msg_receiver').html(msg_receiver_content + ' <li class="single_receiver" id="single_receiver_'+$(this).attr('id')+'">'+$(this).find('span').html()+'</li>');

    $('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500);

    });
});

有人知道为什么在FF中两次调用该代码，在Safari中一次调用该代码-我只在搜索结果中的li上单击一次.

在初始状态下，#msg_receiver-div为空，但似乎在变量msg_receiver_content具有某些内容之前执行了语句$('#msg_receiver').html(，然后变量具有应在其后添加的内容...

解决方案

我一直在努力解决同一问题.所有事件似乎都可以正常工作，但是click事件似乎多次触发.在.on()之前添加.off()似乎可以解决此问题.

这会导致多个click事件:

$("#select").on("click", function(event){
    //do something
});

这恰好触发了一个click事件.到目前为止，我还无法触发多个事件:

$("#select").off().on("click", function(event){
    //do something
});

i have a search field in which the user enters a letter and the ajax script in the background performs a search. The results are displayed live in a ul-li list. The user can click on the li which class is 'search_list_item'. After the click the username/id is copied into another div (the msg-receiver div).

I have a strange behaviour because in Safari everything works fine. In firefox the click-event seems to be fired two times, because i see the username two times in the #msg_receiver-div.

The code looks like this:

$(document).ready(function(){
    $('#searchresult').on('click', 'li.search_list_item', function(){

    var msg_receiver_content = $('#msg_receiver').html();

    $('#msg_receiver').html(msg_receiver_content + ' <li class="single_receiver" id="single_receiver_'+$(this).attr('id')+'">'+$(this).find('span').html()+'</li>');

    $('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500);

    });
});

Does anybody know why the code is called two times in FF and one time in Safari - i only click one time on the li in the search result.

Edit: In the initial state the #msg_receiver-div is empty, but it seems like the statement $('#msg_receiver').html( is performed before the variable msg_receiver_content has some content and then the variable has the content which should be added afterwards...

解决方案

I have been struggling with the same issue. All events seem to work fine, the click event however seems to be firing multiple times. Adding the .off() before .on() seems to solve this issue.

This is causing multiple click events:

$("#select").on("click", function(event){
    //do something
});

This is firing exactly one click event. I have not been able to trigger multiple events so far with this:

$("#select").off().on("click", function(event){
    //do something
});

这篇关于jQuery-.on('click'，...)事件在Firefox中触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！