C# jQuery首次将类添加到HTML锚

我的一个网站需要具备以下功能： 按钮单击>弹出模式>关闭模式

当人们单击按钮时，按钮样式将更改为使用jQuery addClass加载，直到弹出模式

当模态弹出时，后面的按钮将被jQuery删除加载类

当人们关闭模态时，他们可以再次单击按钮并再次调用模态弹出

我已经尝试了很多方法，但所有方法都有自己的问题，我在下面提到：

这是我的按钮代码（在iFrame中）

当模态弹出时，我使用此代码删除该类以使其恢复正常

$("#PersonalModal").on('show.bs.modal', function () {
    $('#iconPersonalSearch').attr("class", "");
});

还是这个

$("#PersonalModal").on('show.bs.modal', function () {
    $('#iconPersonalSearch').removeClass('spinner-border spinner-border-sm mr-05');
});

问题1: 单击按钮后，将样式更改为“加载”是成功的，但当我关闭“模式”并再次单击时，样式将不会再次发生任何更改（但“模式弹出”仍然有效）。我可以知道是什么问题引起的吗

模式pop在使用c从代码隐藏进行一些计算之后#

实际上，该功能的最佳效果应该是在顶部窗口中附加模态， 但是，当我将其附加到顶部窗口时，第一次单击按钮可以更改样式并弹出模式，第二次单击按钮将完全没有包含样式更改和模式弹出的功能

我使用下面来自代码隐藏的代码将模态附加到顶部窗口

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "var fatherBody = $(window.top.document.body);fatherBody.append($('#PersonalModal').modal('show'));", true);

问题2:

---

无论我点击按钮多少次，我如何让该按钮在样式更改和模式弹出的情况下工作？

使用下面的代码为addClass解决问题

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_beginRequest(function (sender, e) {
        $('#iconPersonalSearch').addClass('spinner-border spinner-border-sm mr-05');
    });
}
prm.add_endRequest(function (sender, e) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $('#iconPersonalSearch').attr("class", "");    
    }
});

---

检查元素id是否未被修改或更改。您是否在浏览器的控制台窗口中遇到任何错误？为什么要对服务器进行完整调用以显示模式？那真的毫无意义。只需在

$（“#btnPersonalSearch”）中使用jQuery直接显示模式即可。单击（函数（）{

。如果需要进行一些服务器端处理以填充模式，最好使用AJAX，这样就不会出现整页刷新的问题（我很确定这可能会导致，或者至少对您描述的问题没有帮助）。您将类更改为

iconPersonalSearch

不会对按钮的工作方式产生任何影响。我建议使用

$（）.addClass（“带空格的类列表”）

和

$（）.removeClass（“带空格的同一类列表”）

-使用

.attr（“类”）。

将删除不在您正在更改的类列表中的任何其他类。无论哪种方式，如果您删除添加/删除类/attr（“类”）然后您可以确保从您的调查中排除该错误。@AmbrishPathak没有任何相关错误appeared@ADyson是的，在模态弹出之前有很多计算要做，但是，按钮已经在UpdatePanel下，以防止整页刷新。。。

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#PersonalModal').modal('show');", true);

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "var fatherBody = $(window.top.document.body);fatherBody.append($('#PersonalModal').modal('show'));", true);

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_beginRequest(function (sender, e) {
        $('#iconPersonalSearch').addClass('spinner-border spinner-border-sm mr-05');
    });
}
prm.add_endRequest(function (sender, e) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $('#iconPersonalSearch').attr("class", "");    
    }
});