Question

每次用户点击li时，都应该向该li添加新的ul，基本上想用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将触发点击事件两次，您需要停止父项的点击事件，并且只触发您点击的事件。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您必须停止点击事件的传播，即

$('#tree').on('click', 'li', function(e) {
    e.stopPropagation();
    $(this).append('<ul style="display:block;"><li>list1</li><li>list2</li></ul>');     
});

Working fiddle

在ul中获得额外的'li'

2 个答案: