單擊子div而不是父div

Question

我想用Jquery創建一個樹視圖。 創建第一個子節點非常好。 但是當我想創建一個新div並使其成為子div的子元素時，它不起作用，因為仍然選擇父級而不是子級div。

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function() { currentSelectedNode = container; }); $(parent).append(container); } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div> 

您可以選擇div容器並向其添加新的子容器。 但是沒有辦法為當前的子容器創建子容器。

所以我想創造的是這樣的

Answer 1

stopPropagation是阻止點擊向上移動樹所需的。

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function(e) { e.stopPropagation() $(".selected").removeClass("selected"); currentSelectedNode = container; $(this).addClass("selected"); }); $(parent).append(container); } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; background-color: #FFF; } .selected { background-color: #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div> 

Answer 2

雖然這不是完整的解決方案，但我認為它會給你一個想法

  if( document.getElementById('treeViewNodechild') ){ 
     var childEle = $('#treeViewNodechild');
     $(childEle).append(container);
  }

訣竅是監視子ID是否存在，如果是，則在子級內追加，如果不附加到父級。

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function() { currentSelectedNode = container; }); $(parent).append(container); //if child exist if( document.getElementById('treeViewNodechild') ){ //console.log('child exist'); var childEle = $('#treeViewNodechild'); $(childEle).append(container); } } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div>