首页 > html生成后动态添加的元素,怎样才能操作?

html生成后动态添加的元素,怎样才能操作?

    $(".tags ul").append("<li><div class='close_icon'><a href='javascript:;'><img src='images/close_icon.png'/></a></div><span>"+checked[i].value+"</span></li>");

用这种方式动态添加的元素,想要对它进行操作,需要使用什么方法?


假设li的父元素是ul,对li进行click操作
那么可以对生成的li的父元素ul进行绑定操作

//jquery版本好像要1.8以上吧,要是on用不起来,就用live
$("ul").on("li","click",function(){
    
})

$("ul").live("li","click",function(){
    
})

解决方案:
采用事件委托的方式,可以使用jQuery中delegate方法

$('.tags').delegate('.close_icon','click',function(){
    //处理...
})

原理及js实现:
js中有两种事件流:事件捕获事件冒泡。区别是事件的传播顺序不同,这里我们使用冒泡。将事件绑定到父元素。子元素接收到事件,向上冒泡,传播到父元素并触发事件,写个Demo: http://jsfiddle.net/7a46pa67/

fiddle打不开的话,看下面代码:

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button id="btn">添加节点</button>
var ul = document.getElementById('ul');
ul.addEventListener('click',function(ev){
    alert(ev.target.innerText);
},false);//在冒泡阶段处理

var btn = document.getElementById('btn');
var i = 4;
btn.onclick = function(){
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(i++));
    ul.appendChild(li);
}

var ele = $("<li><div class='close_icon'><a href='javascript:;'><img src='images/close_icon.png'/></a></div><span>"+checked[i].value+"</span></li>")
.appendTo(".tags ul");
...// 对ele进行后续操作

$("<div>ss</div>").find('div').html("ddd");
【热门文章】
【热门文章】