javascript - jQuery-分离然后将一个项目附加到列表中-为什么这个简单的示例不起作用？

http://jsfiddle.net/jononomo/FGB7j/1/

HTML：

<ol id="item_list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li id="form_list_item">
    <form action="/add_item/" method="post" id="add_item_form">
      <input type="text" name="newitem" value="" id="newitem"/>
      <input type="submit" value="Add" />
    </form>
  </li>
</ol>

JavaScript：

var frm = $('#add_item_form');
frm.submit(function () {
  console.log('a')
  var form_list_item = $("#form_list_item");
  console.log(form_list_item)
  console.log('b')
  $("#item_list").detach(form_list_item);
  console.log('c')
  $("#item_list").append("<li>new item</li>");
  console.log('d')
  $("#item_list").append(form_list_item);
  console.log('e')
  return false;
});

console.log：

a
[li#form_list_item, context: document, selector: "#form_list_item", jquery: "1.10.1", constructor: function, init: function…]
b
Uncaught TypeError: Object [object Object] has no method 'replace'

同样，任何关于正在发生什么的理论都将受到赞赏。例如，我可以使用jquery选择#form_list_item，那么为什么不在它下面的#item_list呢？

最佳答案

您需要在必须与dom分离的元素集上调用detach，在这种情况下为form_list_item.detach()

detach()使用no或字符串作为参数，该参数用于过滤调用了detach的集合。

var frm = $('#add_item_form');
frm.submit(function () {
    console.log('a')
    var form_list_item = $("#form_list_item");
    console.log('b')
    form_list_item.detach()
    console.log('c')
    $("#item_list").append("<li>new item</li>");
    console.log('d')
    $("#item_list").append(form_list_item);
    console.log('e')
    return false;
});

演示：Fiddle

关于javascript - jQuery-分离然后将一个项目附加到列表中-为什么这个简单的示例不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20034119/