1

我有一个搜索字段，用户在其中输入一个字母，后台的 ajax 脚本执行搜索。结果实时显示在 ul-li 列表中。用户可以点击类是'search_list_item'的li。单击后，用户名/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').html(是在变量msg_receiver_content有一些内容之前执行的，然后变量有应该在之后添加的内容......

4

3 回答 3

6

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

这导致了多个click事件：

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

这恰好触发了一个click事件。到目前为止，我无法通过以下方式触发多个事件：

$("#select").off().on("click", function(event){
    //do something
});
于 2013-10-29T14:43:37.387 回答
1

您可能需要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);

    });
});
于 2012-07-06T17:04:41.480 回答
0

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

$(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;
    }
    });
});
于 2012-07-06T18:07:20.323 回答