javascript - jquery 选择器不适用于添加的标签

Question

我在使用 jQuery 新创建的元素时遇到问题，我的小脚本在这里:

$('.view_button').click(function(){

    $.ajax({
        url: '/devices/view_ajax',
        cache: false,
        type: 'post',
        dataType: 'JSON',
        data: {id: $(this).attr('data')},
        success: function(data){
            var maskHeight = $(window).height();
            var maskWidth = $(window).width() - 100;
            var body = $('#devices_wrapper');
            var div_outside =  $('<div/>', {id:'wrapper'}).appendTo(body);
            div_element =  $('<div/>', {id:'popup'}).appendTo(div_outside);
            div_element.css({position: 'relative', bottom: 0, 'z-index': 10000});
            $.each(data, function(i,v){
                if(v && i){
                    div_wrapper =  $('<div/>', {'class': 'part'}).appendTo(div_element);
                    div = document.createElement('div');
                    span = document.createElement('span');
                    $(span).html(i).appendTo(div_wrapper);
                    $(div).html(v).appendTo(div_wrapper);
                }
            });
            close_button = $('<div/>', {'class':'close_popup', text: 'X'}).appendTo(div_wrapper);

        },
        error: function(data){
            alert('error');
        }
    })
});

$('.close_popup').click(function(){
    $('#wrapper').remove();
})

当我点击close_popup时什么都没有执行，我认为原因是 tag > close_popup jQuery 选择器看不到，如果是的话如何添加它？或者也许我的错误有不同

Answer 1

您需要使用event delegation 为那些动态添加到 DOM 的元素附加事件:

$(document.body).on('click','.close_popup',function(){
    $('#wrapper').remove();
})