图片箭头就是隐藏框里动态添加的的标签元素 但就是这个动态添加的触发不了
这样啊,我写了一个demo
var proHtml='';
for(var i=0;i<3;i++){
proHtml+='<p class="p2"><span>'+i+'</span></p>';
}
$('body').append(proHtml)
$(proHtml).on('click','.p2',function(){
alert($(this).text())
});
$('body').append('<p>=============</p>')
$('body').append(proHtml);
$('body').append('<p>=============</p>')
$('body').append($(proHtml));
$('body').append('<p>=============</p>')
$('body').append(domOfxx());
function domOfxx(){
var proHtml='';
for(var i=0;i<3;i++){
proHtml+='<p class="p2"><span>'+i+'</span></p>';
}
return $(proHtml).on('click',function(){
alert($(this).text())
}).css('color','red')
}
-
首先你要知道,proHtml是什么。根据你的写法:
proHtml='<p class='p2'>..</p><p class='p2'>...</p>'
那么,把它当成在页面上的html,这些p放在jq里面是什么样子呢?答案就是p,即
$(proHtml)==$('.p2')
。那么再按照你的写法得$('.p2').on('click','.p2',fn)
,
p里面可没有子元素类名为.p2的哦。其次,你append里面的$(proHtml)跟你后面$(proHtml).on('click')是两个东西。因为$是一个函数,你相当与调用了两次,两次的返回值不是同一个的哦
=============2016年9月7日18:02:42补充==========
楼下已经有人回答了,jq事件绑定的写法是这样:
$(他爹).on('click','他儿子',fn)
,而你proHtml里面都是p,这些p的关系都是兄弟关系而不是父子关系,懂吗?兄弟关系在jq里面就跟$(p)
一样,所以你写的就变成了$(他爹).on('click','他爹',fn)
,你想想,在他爹的儿子里面喊他爹的名字,会有人响应你么。所以对于兄弟关系的要这样绑事件:$(proHtml).on('click',fn)
,就是不需要找了,我知道proHtml里面个个都是爹,都是我要找的对象。-
第二个错误,就是append的。你这样写是错误的,要么参考我上面的写法,要么这样写:
$('.proxx').append($(proHtml).on('click',fn)) /*或者*/ var $proHtml=$(proHtml); $proHtml.on('click',fn); $('.proxx').append($proHtml) /*上面是正确写法*/ /*-----------------------*/ /*下面是错误例子*/ var a=$(proHtml); var b=$(proHtml); b.on('click',fn) $('.proxx').append(a); /*a的内容跟b是一样的,但a不是b*/ /*就像孙猴子一样,真假美猴王看起来都是孙悟空的样子,但一个是孙悟空,另一个是六耳泥猴*/
所以你的代码里面出现了真假美猴王。然后你给其中一只猴子绑定了一个事件,然后把另一只猴子放进了页面里。然后你点击页面里面的猴子希望能触发事件,然而那只猴子表示:“干嘛,老子身上又没有事件”
需要事件绑定。
$("父元素").on("click", "你点击的元素",callfn);
就可以实现你要的了