jQuery - .on('click', ...) event fires two times in Firefox
<p>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).</p>

<p>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. </p>

<p>The code looks like this:</p>

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

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

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

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

    });
});
</code></pre>

<p>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.</p>

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