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>