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

Question

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);
    });

Answer 1

 <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>

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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