Question

我有一个搜索字段，用户在其中输入一个字母，后台的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 + ' <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中被调用一次 - 我只在搜索结果中点击了一次。

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

Answer 1

我一直在努力解决同样的问题。所有事件似乎都运行正常，click事件似乎多次触发。在.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 + ' <li class="single_receiver" id="single_receiver_'+$(this).attr('id')+'">'+$(this).find('span').html()+'</li>');

        $('#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 + ' <li class="single_receiver" id="single_receiver_'+$(this).attr('id')+'">'+$(this).find('span').html()+'</li>');

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

        blockClick=false;
    }
    });
});

jQuery - .on（'click'，...）事件在Firefox中触发两次

3 个答案: