1

ユーザーが文字を入力する検索フィールドがあり、バックグラウンドで ajax スクリプトが検索を実行します。結果は ul-li リストにライブで表示されます。ユーザーは、クラスが「search_list_item」である li をクリックできます。クリックすると、ユーザー名/ID が別の div (msg-receiver div) にコピーされます。

Safari ではすべて正常に動作するため、奇妙な動作をします。Firefox では、#msg_receiver-div でユーザー名が 2 回表示されるため、クリック イベントが 2 回発生するようです。

コードは次のようになります。

$(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 で 2 回、Safari で 1 回呼び出される理由を知っている人はいますか?検索結果で li を 1 回だけクリックします。

編集: 初期状態では #msg_receiver-div は空ですが、変数にコンテンツが含ま$('#msg_receiver').html(れる前にステートメントが実行され、変数msg_receiver_contentに後で追加する必要があるコンテンツが含まれているようです...

4

3 に答える 3

6

私は同じ問題に苦労してきました。すべてのイベントは正常に動作しているように見えますが、clickイベントは複数回発生しているようです。.off()beforeを追加すると、.on()この問題が解決するようです。

これにより、複数のclickイベントが発生しています。

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

これは、正確に 1 つの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

ロック変数を設定できます。このアクションには時間がかかるため、2番目のクリックイベントをロックアウトする必要があります。

$(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 に答える