Question

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？

Answer 1

你需要在必须与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

JQuery - detach然后将一个项目附加到列表中 - 为什么这个简单的例子不起作用？

1 个答案: