Question

我正在尝试创建一个简单的树形图，我可以在父级别，子级别和孙级别添加项目。目前，添加父项可以正常工作。我被困在尝试添加一个子项目，甚至没有能够启动孙子级别。我试图只是尝试一下，并让它在子级别添加任何项目，但它无法正常工作。

HTML

<ul id="addParent">
  <li class="root" class="add-child">
    <input /> <p class="add-child-field"><i class="fa fa-plus"></i> New Child Tag</p>
  </li>
  <li>
    <input />  <p class="add-gc-field"><i class="fa fa-plus"></i> New Grandchild Tag</p>      
    <ul> 
  <li><input /></li>
  <li><input /></li>
  <li><input /></li>
    </ul> 
  </li>
  <li><input /> <p class="add-gc-field"><i class="fa fa-plus"></i> New Grandchild Tag</p>   </li>
  <li>
    <input /> <p class="add-gc-field"><i class="fa fa-plus"></i> New Grandchild Tag</p>   
<ul>
  <li><input /></li>
  <li><input /></li>
</ul>  
  </li>
</ul>  
<div class="add-field"><i class="fa fa-plus"></i> New Parent Tag</div>

jquery的

$(".add-field").click(function() {
  $('#addParent').append('<li class="root" id="addChild"><input /> <p class="add-child-field" onclick="add_child();"><i class="fa fa-plus"></i> New Child Tag</p></li>')
});

$(".add-child-field").click(function() {
  $(this).find("ul").append('<input />');
});

http://jsfiddle.net/ppzo7opy/1/

感谢您的帮助。

Answer 1

请尝试以下方法：

$(".add-child-field").click(function() {
  $(this).append('<input /> <p class="add-child-field"><i class="fa fa-plus"></i> New Child Tag</p>');
});

Fiddle

Answer 2

首先，您需要使用.on()，因为您会动态创建元素。第二个.find("ul")不正确，因为此语句将尝试查找所点击的<p>的子元素，而这不是您想要做的。

这是完全正常的版本：https://jsfiddle.net/ppzo7opy/4/

$(".add-field").click(function () {
    $('#addParent').append('<li class="root" id="addChild"><input /> <p class="add-child-field" onclick="add_child();"><i class="fa fa-plus"></i> New Child Tag</p></li>')
});

$(document).on('click', ".add-child-field", function () {
    $(this).parent().after('<li><input /></li>');
});

$(document).on('click', ".add-gc-field", function () {
    if($(this).next('ul').length)
        $(this).next('ul').append('<li><input /></li>');
    else
         $(this).append('<ul><li><input /></li></ul>');
});

无法使用jquery在html树上添加新列表项

2 个答案: