jQuery-从Ajax检索数据后如何添加关闭按钮？

Question

我从Ajax检索数据时遇到问题。 我想添加按钮“ X”以关闭显示数据后的弹出窗口。

我试图添加一个像这样的按钮：

jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');

在弹出窗口中，用户可以关闭我的弹出窗口。

我的代码如下：

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" onclick="popupout(\'.popup\')"></div>');
            jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />");  
            jQuery(".popup").fadeIn();
            jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
        },
        success : function(data){
            jQuery(".popup").html(data.data);
        },
    });      
};
function popupout(popup){
    jQuery(popup).fadeOut(1000);
    jQuery(popup).remove();
}

我的CSS代码：

.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%;
    display: inline-block;
    cursor: pointer;
    background-color: white;
    padding: 30px 50px;
    color: black;
    overflow-y: scroll;
    border: 1px solid #f2f2f2;
}

Answer 1

在您的beforeSend事件中，您可以附加html。 但是在成功事件中它将被替换。 在这一行中，问题是

jQuery(".popup").html(data.data);

但是，除了在这里追加data.data之外，还可以解决此问题。 像这样

jQuery(".popup").append(data.data);

---

对于您的评论问题，您仍然可以使用beforeSend事件。 像这样

beforeSend:function(){
// after your codes
jQuery(".popup").append("<img src='loading.gif' class='loading'>");
}

success:function(){
// after your codes
jQuery(".popup").find('.loading').remove();
}

您可以使用CSS调整图像的外观。 但是我分享了如何实现这一目标的想法

Answer 2

您可以成功添加close button html。

 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" onclick="popupout(\'.popup\')"></div>');
            jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />");  
            jQuery(".popup").fadeIn();
            jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
        },
        success : function(data){
            jQuery(".popup").html('<div class="popup" onclick="popupout(\'.popup\')"></div>'+data.data);
        },
    });      
};
function popupout(popup){
    jQuery(popup).fadeOut(1000);
    jQuery(popup).remove();
}

Answer 3

jQuery(".popup").html(data.data);覆盖了关闭按钮jQuery(".popup").html(data.data); 因为您要替换.popup内的.popup 。

我在下面的代码段中使用.append而不是.html编写了一些代码，并且您的按钮出现了并且可以正常工作。

我只是在容纳加载gif的弹出窗口中放置一个占位符，然后用数据替换该div的html。

 function getData(){ jQuery("#wrapper").append('<div class="popup" onclick="popupout(\\'.popup\\')"></div>'); jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />"); jQuery(".popup").fadeIn(); jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>'); jQuery(".popup").append('popup data'); }; function popupout(popup){ jQuery(popup).fadeOut(1000); jQuery(popup).remove(); } getData(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper" ></div>