2

我有一个显示项目列表的 jQuery Mobile 应用程序。单击向上或向下按钮时，我可以选择一个项目并将其向上或向下移动。

当我通过单击按钮向上或向下移动项目时，显示的项目以及它们的项目 ID 都会被交换。然后我发送一条 ajax 发布消息，其中包含项目移动的步骤。

我所看到的是，如果我点击得太快，有时项目不会按照预期的方式移动。也可能发生 item-id 重复的情况，就好像函数在 item-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 元素。下一个点击事件不会等待第一个完成，第一个也不会推迟第二个。

在您的情况下，只有两种解决方案是可能的。

解决方案 1

首先，在第一次点击后，解除按钮的点击事件，像这样：

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

其次，在ajax成功和错误回调期间再次绑定click事件。这是一种方式。

解决方案 2

第二种解决方案更简单，但有时您将无法使用它：

看看这个链接：

1点击后禁用jquery功能，以防止多次执行

于 2013-03-17T15:29:48.073 回答