動態添加輸入元素作爲樹點擊jquery

Question

當我點擊下面的'添加'我想輸入元素出現爲父。它工作正常，但所有子元素執行而不是一個。此外，如果我點擊他們執行的任何位置，我不想要。

$(document).ready(function() { 
 
    $(".add_field_button").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#maingroup_1").append('<div id="Subgroupmain">Add 1<input type="text"></div>'); 
 
    return false; 
 
    }); 
 

 
    $(document).on("click", "#Subgroupmain", function(e) { 
 
    $("#Subgroupmain").append('<div id="SubSubgroupmain" style="margin: 0 0 0 23px;">Add 2<input type="text"></div>'); 
 
    }); 
 
    
 
    $(document).on("click", "#SubSubgroupmain", function(e) { 
 
    $("#SubSubgroupmain").append('<div id="Sub3groupmain" style="margin: 0 0 0 53px;">Add 3<input type="text"></div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="maingroup"> 
 
    <div id="maingroup_1"> 
 
     <span class="add_field_button">Add </span> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你有幾個問題在這裏。首先，您每次添加新內容時都會重複id屬性。改爲將這些改爲類。然後在事件處理程序中使用this關鍵字來引用引發該事件的元素，以便您只追加到該單個實例。最後，在事件上添加對stopPropagation()的調用，以停止事件冒泡，以便嵌套的div元素不會引發多個事件，這些事件又會附加多個div。試試這個：

$(document).ready(function() { 
 
    $(".add_field_button").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#maingroup_1").append('<div class="Subgroupmain">Add 1<input type="text"></div>'); 
 
    return false; 
 
    }); 
 

 
    $(document).on("click", ".Subgroupmain", function(e) { 
 
    e.stopPropagation(); 
 
    $(this).append('<div class="SubSubgroupmain" style="margin: 0 0 0 23px;">Add 2<input type="text"></div>'); 
 
    }); 
 
    
 
    $(document).on("click", ".SubSubgroupmain", function(e) { 
 
    e.stopPropagation(); 
 
    $(this).append('<div class="Sub3groupmain" style="margin: 0 0 0 53px;">Add 3<input type="text"></div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="maingroup"> 
 
    <div id="maingroup_1"> 
 
     <span class="add_field_button">Add </span> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您使用的ID重複的，但這裏的實際問題是，你要追加到一般的ID，而不是點擊目標。

使用此：

$(this).append(); 

相反的：

$("#SubSubgroupmain").append(); 

這確實應該是：

$(".SubSubgroupmain").append();