js--未来元素

通过动态生成的标签，在生成标签直接绑定事件是无效的。

eg:html标签

<div id="tree">
</div>

 <script>

$('#tree .items').on('click', function(e) {
　　console.log(e);
　　e.stopPropagation();
　　if($(e.target).find('ul').is(':visible')) {
　　　　$(e.target).find('ul').hide();
　　} else {
　　　　$(e.target).find('ul').show();
　　}
　　$(e.target).siblings().find('ul').hide();
});

function creatHtml(data) {
　　var length = data.length;
　　var htms = '<ul>'
　　for(var i = 0; i < length; i++) {

　　　　if(data[i].children && data[i].children.length > 0) {
　　　　　　htms += '<li class="items" >' + data[i].name;
　　　　　　htms += creatHtml(data[i].children);
　　　　} else {
　　　　　　htms += '<li>' + data[i].name;
　　　　}
　　　　htms += '</li>';
　　}
　　htms += '</ul>';
　　return htms;
}
$('#tree').html(creatHtml(arr));
$('.items').find('ul').hide();

</script>

 

以上的事件是没有效果的；

可以通过两种方式改变：

1.把click事件封装在一个方法里，在产生标签后调用。

 <script>

function bindItems(){

　　$('#tree .items').on('click', function(e) {
　　　　console.log(e);
　　　　e.stopPropagation();
　　　　if($(e.target).find('ul').is(':visible')) {
　　　　　　$(e.target).find('ul').hide();
　　　　} else {
　　　　　　$(e.target).find('ul').show();
　　　　}
　　　　$(e.target).siblings().find('ul').hide();
　　});

}

 

function creatHtml(data) {
　　var length = data.length;
　　var htms = '<ul>'
　　for(var i = 0; i < length; i++) {

　　　　if(data[i].children && data[i].children.length > 0) {
　　　　　　htms += '<li class="items" >' + data[i].name;
　　　　　　htms += creatHtml(data[i].children);
　　　　} else {
　　　　　　htms += '<li>' + data[i].name;
　　　　}
　　　　htms += '</li>';
　　}
　　htms += '</ul>';
　　return htms;
}
$('#tree').html(creatHtml(arr));

//在生成标签的后面调用此方法。

bindItems();

$('.items').find('ul').hide();

</script>

 

2.on()

//未来元素添加点击事件
$('#tree').on('click', '.items', function(e) {
　　e.stopPropagation();
　　if($(e.target).find('ul').is(':visible')) {
　　　　$(e.target).find('ul').hide();
　　} else {
　　　　$(e.target).find('ul').show();
　　}

　　$(e.target).siblings().find('ul').hide();
});

 

转载于:https://www.cnblogs.com/fangyinghua/p/9140176.html