Question

我试图在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（导轨）：

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

Answer 1

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

Answer 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

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

2 个答案: