Question

我正在尝试更新jquery可排序，当我通过按钮删除<li>元素时，点按“

”。

$(function() {
  $("#sortable").sortable({
    axis: 'y',
    update: function(event, ui) {
      var data = $(this).sortable('serialize');
      $.ajax({
        data: data,
        type: 'POST',
        url: 'updatesort.php'
      });
    }
  });
});

现在它仅在用户拖放<li>元素时才会更新。

更新（html）：

<ul id="sortable" class="ui-sortable">
  <li id="item-1"><button class="removeli">remove</button></li>
  <li id="item-2"><button class="removeli">remove</button></li>
  <li id="item-3"><button class="removeli">remove</button></li>
  <li id="item-4"><button class="removeli">remove</button></li>
  <li id="item-5"><button class="removeli">remove</button></li>
</ul>

Answer 1

使用：

$("#sortable button.removeli").on("click", function () {
     $(this).parent().remove();
});

您可以尝试这样的事情：

$(function() {
  $("#sortable").sortable({
    axis: 'y',
    update: function(event, ui) {
      var data = $(this).sortable('serialize');
      $.ajax({
        data: data,
        type: 'POST',
        url: 'updatesort.php'
      });
    }
  });
  $("#sortable button.removeli").on("click", function() {
    $(this).parent().remove();
  });
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="sortable" class="ui-sortable">
  <li id="item-1">
    Item 1
    <button class="removeli">remove</button>
  </li>
  <li id="item-2">
    Item 2
    <button class="removeli">remove</button>
  </li>
  <li id="item-3">
    Item 3
    <button class="removeli">remove</button>
  </li>
  <li id="item-4">
    Item 4
    <button class="removeli">remove</button>
  </li>
  <li id="item-5">
    Item 5
    <button class="removeli">remove</button>
  </li>
</ul>

Answer 2

这对我来说也很好：

$(".removeli").click(function() {
  //
  // get <li>-id for removing it from the database
  //

  $(this).closest("li").remove();

  var data = $("#sortable").sortable('serialize');
  $.ajax({
    data: data,
    type: 'POST',
    url: 'updatesort.php'
  });
});

通过删除<li>更新可排序

2 个答案: