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("點擊改變");
            });
        }
    });
}