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

Adding a delete button to each item in jquery ui sortable list

本文关键字：添加 一个 按钮 删除 项目 排序 列表 jquery-ui      更新时间：2023-09-26

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

以下是我所做的；

Coffescript：

$ ->
  $( "#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（Rails）:

  <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>

添加一个按钮usig 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

我找到了解决方案。的一部分在这里。

正确的添加项目脚本：

$('#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
相关文章：