为 jquery ui 可排序列表中的每个项目添加一个删除按钮

Posted 2023-05-08

【中文标题】为 jquery ui 可排序列表中的每个项目添加一个删除按钮

【英文标题】：Adding a delete button to each item in jquery ui sortable list

【发布时间】：2016-12-09 01:20:15

【问题描述】：

我正在尝试为 Rails 中的 jquery ui 可排序列表中的每个项目添加一个删除按钮。我可以添加项目并出现按钮，但是当我单击它时，它会刷新页面并且所有 javascript 部分都变得不可用。

这就是我所做的；

咖啡：

$ ->
  $( "#sortable" ).sortable(
    revert: true
  );
  $( "#draggable" ).draggable(
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  );
  $( "ul, li" ).disableSelection();

  $('#additem').click (e) ->
    e.preventDefault()
    text = $("#e2").val()
    $li = $('<li class=\'alert alert-info\' style="font-weight: bold;"/>').text(
          text).append(
          $('<a />', 'id' : 'delete', 'class': 'glyphicon glyphicon-remove', 'href': '#', 'style' : 'float: right;'))
    $('#sortable').append $li
    $('#sortable').sortable 'refresh'
    return

  $('#sortable #delete').click ->
    $(this).parent().remove()
    return

html（导轨）：

  <h3>Questions</h3>
  <%= select_tag 'user', options_for_select(@questions.collect |q| [q.content] ), id: "e2", name: "add1" %>

  <a href="#" id="additem" class="btn btn-primary">Add Question</a><br />
  <ul id="sortable">

  </ul>

【参考方案1】：

添加一个使用 html 的按钮，该按钮由 rails 生成

<a href="/question/question_id" data-remote="true"  data-method="delete" data-comfirm="Are you sure?" role = "button" class="btn btn-remove">delete
</a>

在链接生成过程中忘记放置方法：delete 和 remote:true

【讨论】：

它没有给出任何响应。 Javascript 部分甚至没有损坏。什么都没有发生。

【参考方案2】：

我找到了解决方案。一部分是here。

正确的添加项目脚本：

$('#additem').click (e) ->
  e.preventDefault()
  text = $("#e2").val()
  $li = $('<li class=\'alert alert-info\' style="font-weight: bold;"/>').text(text).append(
        $('<a data-remote="true" id=\"delete\" class=\"glyphicon glyphicon-remove\" href=\"#\" style=\"float: right;\"></a>'))
  $('#sortable').append $li
  $('#sortable').sortable 'refresh'
  return

还有删除项目功能是错误的。这是工作脚本：

$('#sortable').on 'click', '#delete', ->
  $(this).parent().remove()
  return