单击子div而不是父div

Question

我想用Jquery创建一个树视图。创建第一个子节点非常好。但是，当我想创建一个新的div并使其成为子div的子项时，它不起作用，因为仍然选择了父级而不是子级div。

＆＃13;

＆＃13;

$(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();
}

＆＃13;

#nodeContainer {
  margin-top: 10px;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可以选择div容器并向其添加新的子容器。但是没有办法为当前的子容器创建子容器。

所以我想要创建的是这样的

Answer 1

stopPropagation是您阻止点击向上移动树所需的内容。

＆＃13;

＆＃13;

$(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();
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

虽然这不是完整的解决方案，但我认为它会给你一个想法

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

诀窍是监视子ID是否存在，如果是，则在子级内追加，如果不附加到父级。

＆＃13;

＆＃13;

$(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();
}

＆＃13;

#nodeContainer {
  margin-top: 10px;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;