jQuery：Ajax获取数据后如何为弹窗添加关闭按钮？

这问题太常见了——html()方法会完全替换目标元素里的所有内容，你之前在beforeSend里加的关闭按钮自然就被冲掉了。给你几个靠谱的解决办法，按优雅程度排序：

方案一：重构弹窗结构（推荐） #

把弹窗拆成外层容器（负责固定样式、关闭按钮）和内层内容区（用来加载动态数据），这样更新内容时只操作内层，完全不会影响外层的关闭按钮。

修改JavaScript代码 #

function getData(domain){
    var dataString = "domain=" + domain + "&security="+ mhdomain.security + "&action=getdomain" ;
    jQuery.ajax({
        action: "getDomain",
        type: "post",
        url: mhdomain.ajaxurl,
        dataType: "json",
        data: dataString,
        beforeSend: function(xhr){
            // 创建带关闭按钮和独立内容区的弹窗结构
            jQuery("#wrapper").append(`<div class="popup">
                <button class="popup-close" style="font-size: 150%; color: red; top: 10px; right: 15px; position: absolute; border: none; background: transparent; cursor: pointer;">x</button>
                <div class="popup-content"></div>
            </div>`);
            // 把loading图放到内容区里
            jQuery(".popup-content").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />");  
            jQuery(".popup").fadeIn();
            // 给关闭按钮单独绑定事件（阻止冒泡避免触发弹窗的全局点击关闭）
            jQuery(".popup-close").on('click', function(e){
                e.stopPropagation();
                popupout('.popup');
            });
        },
        success : function(data){
            // 只更新内容区的HTML，完全不碰关闭按钮
            jQuery(".popup-content").html(data.data);
        },
    });      
};
function popupout(popup){
    jQuery(popup).fadeOut(1000, function(){
        jQuery(this).remove(); // 动画结束后再移除，体验更好
    });
}

调整CSS（新增定位属性） #

因为关闭按钮用了absolute定位，需要给弹窗容器加相对定位，让按钮相对于弹窗定位：

.popup {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    max-width: 780px;
    width: 100%;
    max-height: 480px;
    height: 100%;
    cursor: pointer;
    background-color: white;
    padding: 30px 50px;
    color: black;
    overflow-y: scroll;
    border: 1px solid #f2f2f2;
    position: relative; /* 新增：让内部绝对定位元素相对于弹窗定位 */
}

这个方案的优势是结构清晰，关闭按钮属于弹窗的固定组件，后续维护和扩展都更方便，完全避免了内容覆盖的问题。

方案二：在success回调中重新添加按钮（快速修复） #

如果不想改结构，最简单的办法就是在替换内容后，重新把关闭按钮加回去：

success : function(data){
    jQuery(".popup").html(data.data);
    // 重新添加关闭按钮并绑定事件
    jQuery(".popup").append(`<button class="popup-close" style="font-size: 150%; color: red; top: 10px; right: 15px; position: absolute; border: none; background: transparent; cursor: pointer;">x</button>`);
    jQuery(".popup-close").on('click', function(e){
        e.stopPropagation();
        popupout('.popup');
    });
},

同样需要给弹窗加position: relative的CSS属性，不然按钮会相对于整个页面定位。这个方法适合快速修复，但每次请求成功都要重新创建按钮和绑定事件，长期来看不如方案一健壮。

内容的提问来源于stack exchange，提问作者Ave