onclick动态生成的元素中,为什么新生成的元素上的Onclick没有效果

AddChapter上本该有点击事件的。可是js动态生成的元素上却没有

 $(function(){ 
     $(".RightContentImg").parent().siblings("div").not(".RightContentImgAdd").css("display","block");
     $(".AddChapter").on("click",function(){
        var div = '<div class="FormItemListEdit" id="FormItemListEditCollapse">'+
   '<a href="javascript:void(0)"><p class="EditContent">'+
    '<a href="javascript:void(0)" class="EditContentImg"></a>准备工作</p></a>'+
    '<a href="javascript:void(0)" class="RightContentImg"></a>'+
    '<div class="RightContentImgAdd"><div class="Entry"><div class="EntryTrangle"></div>'+
  '<a class="AddChapter"href="javascript:void(0)"><p>添加章</p></a>'+
  '<a class="AddSection" href="javascript:void(0)"><p>添加节</p></a>'+
  '<a class="DeleteColumn"href="javascript:void(0)"><p>删除</p></a></div></div>'+
    '<a href="javascript:void(0)" class="RightContentNum">0字</a></div>';
        $("#FormItemListEditCollapse").parent().append(div);
    });
0

5个回答

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<a class="AddChapter" href="javascript:void(0)"><p>添加章</p></a>
<div id="FormItemListEditCollapse"></div>
<script>
    $(document.body).on('click', '.AddChapter', function () {
        var div = '<div class="FormItemListEdit" id="FormItemListEditCollapse">' +
 '<a href="javascript:void(0)"><p class="EditContent">' +
  '<a href="javascript:void(0)" class="EditContentImg"></a>准备工作</p></a>' +
  '<a href="javascript:void(0)" class="RightContentImg"></a>' +
  '<div class="RightContentImgAdd"><div class="Entry"><div class="EntryTrangle"></div>' +
'<a class="AddChapter"href="javascript:void(0)"><p>添加章</p></a>' +
'<a class="AddSection" href="javascript:void(0)"><p>添加节</p></a>' +
'<a class="DeleteColumn"href="javascript:void(0)"><p>删除</p></a></div></div>' +
  '<a href="javascript:void(0)" class="RightContentNum">0字</a></div>';
        $("#FormItemListEditCollapse").parent().append(div);
    })
</script>
1
Vivianluolita
Vivianluolita $("body").on("click",".DeleteColumn",function(){}可以了,只不过要这样写
2 年多之前 回复
Vivianluolita
Vivianluolita $(document.body).on('click', '.AddChapter', function () {}还是没有用
2 年多之前 回复

执行这句$(".AddChapter").on只能获取dom中已经存在的元素,后续添加没搞。。应该给parent添加事件,然后指定选择器

 $(".AddChapter的容器选择器").on("click",'.AddChapter',function(){
1
Vivianluolita
Vivianluolita 回复showbo: http://blog.csdn.net/vivianluolita/article/details/52935607能帮我看一下么
2 年多之前 回复
Vivianluolita
Vivianluolita 回复showbo: 还是有问题,动态的元素可以生成,但是元素上的点击onclick没有效果。
2 年多之前 回复
showbo
支付宝加好友偷能量挖 回复Vivianluolita: 隐藏也没有关系,如果你确认只有你需要的源有AddChapter样式,你指定document都行,但是建议是AddChapter的父元素,缩小范围
2 年多之前 回复
Vivianluolita
Vivianluolita 回复Vivianluolita: 可是它的父元素设置hide(),那么可以找它的父父元素么
2 年多之前 回复
Vivianluolita
Vivianluolita .AddChapter的容器选择器"是它的父元素么?
2 年多之前 回复

你可以试试 $(".addChapter").click(function(){
//TODO
});
可能你引入的jquery版本的问题,有些版本存在这种情况1.9 2.0 2.1 貌似都存在

0
Vivianluolita
Vivianluolita 我之前就是这么写的,然后我师父说必须加on,因为On才能动态绑定事件,可是我加on也没有效果。
2 年多之前 回复

$(".AddChapter的容器选择器").off(".AddChapter的容器选择器").on("click",'.AddChapter',function(){

0
Vivianluolita
Vivianluolita 没有用啊。我看网上$(".clickMeToAppendElement").click(function() { $(".toBeAppend").append("<li><span><i class=\"icon J_classtree\">这是元素内容</i>"); $(".J_classtree").on("click",function(){ alert("终于进来了"); }); );是不是要写代理
2 年多之前 回复

初始化页面的时候,js会给你的标签绑定监听事件,而新生成的标签没有绑定监听事件,因此点击之后无法触发js,这时候需要使用jquery事件delegate()方法来解决,具体写法:$( AddChapter容器的父元素 ).delegate( '.AddChapter', click,function(){
//do something
} ),注意它是绑定到AddChapter的父元素上的

0
Vivianluolita
Vivianluolita 也不行。。。我没有用JS,纯JQuery做的
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!