2

項目のリストを表示する jQuery Mobile アプリがあります。項目を選択して、上下のボタンをクリックすると上下に移動できます。

ボタンをクリックしてアイテムを上下に移動すると、表示されているアイテムとそのアイテム ID が入れ替わります。次に、アイテムによって移動されたステップを含む ajax 投稿メッセージを送信します。

私が見たのは、クリックが速すぎると、アイテムが予期したとおりに動かない場合があるということです。また、アイテム ID のスワッピング操作の途中で関数が中断されたかのように、アイテム ID が重複する場合もあります。

これは既知の機能ですか? これを回避する解決策はありますか?

アイテムを移動するコードは次のとおりです

$("#btnListUp").on( "click", function(evt)
{
    if( selectedItem && !selectedItem.hasClass('ui-first-child') )
    {
        var prev = selectedItem.prev();
        var prevId = prev.attr('item-id');
        var thisId = selectedItem.attr('item-id');
        var step = (parseInt(prevId) - parseInt(thisId))+'';
        prev.attr('item-id', thisId );
        selectedItem.attr('item-id', prevId );
        prev.detach().insertAfter(selectedItem);
        $('#ShopList').listview('refresh');
        $.ajax( {type: 'POST', url: thisId+'/moveUp', data : step,
                contentType :'applicatio/octet-stream' } );
    }
});

$("#btnListDown").on( "click", function(evt)
{
    if( selectedItem && !selectedItem.hasClass('ui-last-child') )
    {
        var next = selectedItem.next();
        var nextId = next.attr('item-id');
        var thisId = selectedItem.attr('item-id');
        var step = (parseInt(nextId) - parseInt(thisId))+'';
        next.attr('item-id', thisId );
        selectedItem.attr('item-id', nextId );
        next.detach().insertBefore(selectedItem);
        $('#ShopList').listview('refresh');
        $.ajax( {type: 'POST', url: thisId+'/moveDown', data : step,
                contentType :'applicatio/octet-stream' } );
    }
});
4

1 に答える 1

1

これは予想される結果です。クリック イベントが btnListUp 要素と btnListDown 要素にバインドされています。次のクリック イベントは、最初のイベントが終了するのを待たず、最初のイベントが 2 番目のイベントを延期することもありません。

あなたの場合、可能な解決策は2つだけです。

解決策 1

まず、最初のクリックの後、次のようにボタンからクリック イベントのバインドを解除します。

$("#btnListUp").on( "click", function(evt)
{
    $(this).off('click');

次に、ajax の成功とエラーのコールバック中に、クリック イベントを再度バインドします。これは一つの方法です。

解決策 2

2 番目の解決策は簡単ですが、使用できない場合があります。

このリンクを見てください：

複数の実行を防ぐために、1回のクリック後にjquery関数を無効にします

于 2013-03-17T15:29:48.073 に答える