Question

我有一些代码可以收集可排序列表并将其转换为数组。代码设置为处理drop事件，因此当您拖动项目然后删除它时，将创建并发送数组。我需要更改它，以便通过按钮点击触发它，由于某种原因，将其转换为点击事件将无法正常工作。

这是现在的功能

$(document).ready(function(){

  $('#sortable-stages').sortable({
     update: function(event, ui) {
         var stage = document.getElementsByClassName('stage');
         var stageOrder = $(this).sortable('toArray');
         $.get('/stages/reorder', { 'order' :  stageOrder });
     }
  });

});

有关如何将此代码转换为按钮单击触发的内容的任何帮助都会很棒。

我确实尝试过明显的

$(document).on('click','#stagereorderbutton', function() {
    //...
});

并且即使它会触发警报也没有运行代码，但只有在update:部分上方的开头放置时才会运行。

Answer 1

您没有更新已停用的媒体资源，请尝试此操作

$('#stagereorderbutton').sortable({
disabled: false,
     update: function(event, ui) {

     var stage = document.getElementsByClassName('stage');

     var stageOrder = $(this).sortable('toArray');

     $.get('/stages/reorder', { 'order' :  stageOrder });


     }
  });

  });

你看过这篇文章， jQuery sortable only works in document ready, not with a button

Answer 2

如果我完全理解您的问题，您只需在按钮click上获取可排序项目的数组：

$(document).ready(function(){

    var items = $('#sortable-stages').sortable(/*options...*/);
    $(document).on('click','#stagereorderbutton',function(){
        $.get('/stages/reorder', { 'order' :  items.sortable('toArray') });
    });

});

JSFiddle Demo

如果您需要update选项，还有另一种解决方案 - 您可以在sortable范围之外定义变量，在范围内更新并在按钮click上使用它：

$(document).ready(function(){

    var stageOrder;
    $('#sortable-stages').sortable({
        update: function(event, ui) {
            var stage = $('.stage');
            stageOrder = $(this).sortable('toArray');
        }
    });
    $(document).on('click','#stagereorderbutton',function(){
        $.get('/stages/reorder', { 'order' :  stageOrder });
    });

});

Answer 3

最终解决这个问题的方法是使用代码创建和更新变量，但只在按钮点击时发送。所以我在get请求周围添加了一个click事件，并且有效。

$(document).ready(function(){

  $('#sortable-stages').sortable({
     update: function(event, ui) {

     var stage = document.getElementsByClassName('stage');
     var stageOrder = $(this).sortable('toArray');

     $('document).on('click','#stagereorderbutton',function() {

       $.get('/stages/reorder', { 'order' :  stageOrder });

     })
    }
  });
});

如何让jquery可以在按钮点击时运行功能

3 个答案: