使用jQuery在HTML樹上添加新列表項的問題

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>');
});

小提琴

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>');
});