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