Question

在我的php后端中，我提供了一种对页面的所有文章进行排序的方法我使用twitter-bootstrap，因此我将每个<div class="col-md-4>排序。这些物品被包裹在可作为可分类物品的面板内。

我将sortable的stop事件绑定到一个函数，该按钮显示“Apply Sorting”按钮。我们的想法是能够根据需要经常随机播放文章，然后点击“应用排序”按钮，对php进行单个ajax调用，更新每篇文章的排序字段。

这是我的代码：

    // cols are all bootstrap column divs
    cols.sortable({
      items: '.panel-default',
      delay: 50,
      cancel: ".adder",
      beforeStop: function() {
         cols.sortable('refreshPositions');
      },
      stop: addSortButton,
     });

     function addSortButton() {
      // if button exists do not add another one
       var button = $('.sorter');
       if (button.length === 0) {
          $('.seperate').prepend('<button class="btn btn-sm btn-primary sorter">Apply Sorting</button>');
       }
       $('.sorter').one('click', function(e) {
          applySorting();
       });
     };

     function applySorting() {
        var articles = cols.find('article');
        var holder = new Array();
        for (var i = 0; i < articles.length; i++) {
            var sorting = i + 1;
            $(articles[i]).attr('data-sorting', sorting);
            var id = $(articles[i]).attr('data-id');
            holder[id] = sorting;
        }
        $('.sorter').prepend(spinner);
        $.ajax({
           type: 'POST',
           url: '/admin/nodes/sort',
           data: {
             'values': holder
           },
        }).done(function(msg) {
            $('.sorter').html('Apply Sorting');
            if (msg === 'ok') {
               alert('Sorting update ran successful!');
            }
        }).fail(function(xhr, status, error) {

       });
     };

我的问题是：
例如，当我只移动一篇文章时，就会进行一次ajax调用。这很好。但是当我决定移动更多文章并将其中的4个切换到不同的位置时，我会得到 4个ajax调用。我以为我可以通过jQuery one（）函数来防止这种行为，但它无法正常工作。此外，berforeStop事件无法解决问题。

如何防止缓存jquery可排序停止事件

0 个答案: