jQuery – .on（’click’，…）事件在Firefox中触发两次

我有一个搜索字段，用户在其中输入一个字母，后台的ajax脚本执行搜索。 结果将显示在ul-li列表中。 用户可以单击类“search_list_item”的li。 点击后，用户名/ ID被复制到另一个div（msg-receiver div）。

我有一个奇怪的行为，因为在Safari中一切正常。 在firefox中，click-event似乎被触发了两次，因为我在＃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 + ' 
'+$(this).find('span').html()+'
'); $('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500); }); }); 

有没有人知道为什么代码在FF中被调用两次而在Safari中被调用一次 – 我只在搜索结果中的li上单击一次。

编辑：在初始状态下，＃msg_receiver-div为空，但它似乎是语句$('#msg_receiver').html(在变量msg_receiver_content有一些内容之前执行，然后该变量具有应该添加的内容然后…

Answer 1

我一直在努力解决同样的问题。 所有事件似乎都运行正常，然而click事件似乎多次触发。 在.on() .off()之前添加.on()似乎可以解决这个问题。

这导致多次click事件：

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

这只是一次click事件。 到目前为止，我还没能用这个触发多个事件：

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

Answer 2

您可能需要event.stopPropagation()来防止事件冒泡（可能正在发生）。

 $(document).ready(function(){ $('#searchresult').on('click', 'li.search_list_item', function(event){ event.stopPropagation(); // stop event bubbling var msg_receiver_content = $('#msg_receiver').html(); $('#msg_receiver').html(msg_receiver_content + ' 
'+$(this).find('span').html()+'
'); $('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500); }); }); 

Answer 3

您可以设置一个锁定变量，因为此操作需要时间，它应该锁定第二次单击事件。

 $(document).ready(function(){ var blockClick = false; $('#searchresult').on('click', 'li.search_list_item', function(){ if(blockClick){ }else{ blockClick = true; var msg_receiver_content = $('#msg_receiver').html(); $('#msg_receiver').html(msg_receiver_content + ' 
'+$(this).find('span').html()+'
'); $('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500); blockClick=false; } }); });