Jquery - .on('click', ...) Event Fires Two Times In Firefox

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

Solution 1:

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
});

Solution 2:

You might need event.stopPropagation() to prevent event bubbling (which is probably happening).

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

        event.stopPropagation(); // stop event bubblingvar 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);

    });
});

Solution 3:

You can set a locking variable, since this action takes time, it should lock out the second click event.

$(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;
    }
    });
});