javascript - 在 ul 中获取额外的 'li'

Question

每次用户点击 li 时，新的 ul 应该添加到那个 li，基本上是想使用 ul 创建二叉树

$('#tree').on('click','li', function(){

		$(this).append('<ul style="display:block;"><li>list1</li><li>list2</li></ul>');	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="tree">
		  	<li>
				sdfsdf	
			</li>
		</ul>

当点击 list1 时，列表被添加了两次

Answer 1

您需要使用 event.stopPropagation(); 以便不传播父事件。因为，点击 li 里面的 li 会触发两次点击事件，你需要停止父级的点击事件，只触发你点击的那个。

$('#tree').on('click','li', function(event){
 event.stopPropagation();
  var ulExist = $(this).find('ul');
  if(ulExist.length === 0){
    $(this).append('<ul style="display:block;"><li>list1</li><li>list2</li></ul>'); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tree">
  <li>
      sdfsdf  
  </li>
</ul>