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("点击改变");
            });
        }
    });
}