jquery - 如何将ajax结果中的点击事件绑定(bind)到按钮

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

所以我有 Button_1，当单击时，它将使用 ajax 请求一个新的 button_2。两个按钮在我的 jquery(document).ready 上都有 click 事件，但是当按钮 2 添加到页面时，它没有 jquery 事件。这可能吗？

这是我的页面加载代码:

jQuery(document).ready(function($){

$('#button_1').click(function(e){
    e.preventDefault();
    var id = $(this).data('id');

    $.ajax({
        type: 'POST',
        url: 'get_button_2.php',
        data: 'id='+id,
        dataType: 'html'
    })
    .done(function(response){
        $('#button-container').html('');
        $('#button_1').remove(); // remove button 1
        $('#button-container').html(response).show('500');
    })
    .fail(function(){
        $('#button-container').html('Something went wrong');
    });

});


$('#button_2').click(function(e){
    e.preventDefault();
    alert ('Thank You!');
});

});

Answer 1

您必须在 DOM 上创建事件。

$(document).on('click', '#button_2', function(e){
    e.preventDefault();
    alert ('Thank You!');
});

引用: http://api.jquery.com/on/