jquery获取不了ajax动态添加的内容的解决办法

在HTML页面的一个button

 <div class="ajaxClick">
     <button>内容</button>
 </div>

正常点击事件：

 $(function(){
     $(".ajaxClick button").click(function(){
         $(this).html("点击改变");
     });
 });

现在通过ajax使得button变成“<button>这是ajax添加的按钮</button>”

 function cancel_follow(obj,id) {

     var _this = $(obj);
     $.ajax({
         type: 'post',
         url: 'index.php?app=mobile_follow_designer&act=cancel_follow_designer',
         dataType: 'json',
         data: {'fid': id},
         success: function (result) {
             if (result.code == 200) {
                 $(".ajaxClick").html("<button>这是ajax添加的按钮</button>");
             } else {
                 $.toast(result.tips, {icon: 0});
             }
         }
     });
 }

添加后点击事件就失效了，所以解决办法：

1、把点击事件更换成：

 $(function(){
     $(".ajaxClick button").click(function(){
         $(this).html("点击改变");
     });
     //  这种写法就可以
     $(document).on('click', '.ajaxClick button', function() {
         $(this).html("ajax点击改变");
     });
 });

jquery 1.7以前的版本用live，1.7以后的用on

 $(document).live('.ajaxClick button', function() {
     $(this).html("ajax点击改变");
 });

2、把点击事件写在ajax里面：

 function cancel_follow(obj,id) {
     var _this = $(obj);
     $.ajax({
         type: 'post',
         url: 'index.php?app=mobile_follow_designer&act=cancel_follow_designer',
         dataType: 'json',
         data: {'fid': id},
         success: function (result) {
             if (result.code == 200) {
                 $(".ajaxClick").html("<button>这是ajax添加的按钮</button>");
             } else {
                 $.toast(result.tips, {icon: 0});
             }
             $(".ajaxClick button").click(function(){
                 $(this).html("点击改变");
             });
         }
     });
 }