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没有执行任何内容时，我认为它的原因是jQuery选择器看不到tag > close_popup如果是这样的话如何添加它？或者也许我的错误不同

Answer 1

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

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

Answer 2

使用delegeate或on绑定动态创建元素的事件。

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

OR

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

但使用.on总是更好。

Answer 3

  Try  select immediate parent which static on your html dom


$("#devices_wrapper").on("click",".close_popup",function(){

          $('#wrapper').remove();
    });

jquery选择器不适用于添加的标记

3 个答案: