jQuery addClass to HTML Anchor 首次工作答案

【问题标题】：jQuery addClass to HTML Anchor ony work for first timejQuery addClass to HTML Anchor 首次工作
【发布时间】：2021-01-04 18:00:24
【问题描述】：

我的一个网站需要有一个功能，流程是：按钮点击 > 弹出模式 > 关闭模式

当人们单击按钮时，按钮样式将更改为使用 jQuery addClass 加载，直到 Modal Pop Up。

Modal Pop Up时，后面的按钮会被jQuery移除加载类。

当人们关闭Modal时，可以再次点击按钮，再次调用modal pop。

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

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

<a runat="server" id="btnPersonalSearch" class="btn btn-primary btn-lg btn-block" onserverclick="btnPersonalSearch_ServerClick"  >
    <span runat="server" id="iconPersonalSearch" class="" role="status" aria-hidden="true"></span>
    Search
</a>

当人们点击上面的按钮时，按钮类会随着jQuery而改变

$("#btnPersonalSearch").click(function () {
    $('#iconPersonalSearch').attr("class","spinner-border spinner-border-sm mr-05");
});

当modal弹出时，我用这段代码删除类让它恢复正常

$("#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： 单击按钮后将样式更改为加载是成功的，但是当我关闭模态并再次单击时，样式将不再有任何变化（但模态弹出仍然有效）。我可以知道是什么问题造成的吗？

使用c#从后面的代码完成一些计算后的模态弹出

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

其实这个功能最好的效果应该是在top window上追加modal，但是当我将它附加到顶部窗口时，第一次单击按钮可以更改样式并弹出模态，第二次单击按钮将完全没有功能，包括样式更改和模态弹出。

我使用后面的代码将模态附加到顶部窗口

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

问题 2： 无论我点击多少次，如何让按钮与样式更改和模态弹出一起工作？

【问题讨论】：

检查元素 id 是否没有被修改或更改。您是否在浏览器的控制台窗口中收到任何错误？
你为什么要完整调用服务器只是为了显示一个模式？这真的没有意义。只需在 $("#btnPersonalSearch").click(function () { 中使用 jQuery 直接显示模式。如果您需要进行一些服务器端处理以填充模式，那么使用 AJAX 会更好，那么您就不会有整页刷新的问题（我很确定这可能是导致或至少无助于您描述的问题）。
您的类更改为iconPersonalSearch 应该不会对按钮的工作方式产生任何影响。我建议使用$().addClass("class list with spaces") 和$().removeClass("same class list with spaces") - 使用.attr("class".. 将删除不在您要更改的类列表中的任何other 类。无论哪种方式，如果您删除 add/remove class / attr("class") 那么您可以确保从调查中消除它。
@AmbrishPathak 没有出现任何相关错误
@ADyson 是的，在模态弹出之前需要做很多计算，但是，按钮已经在 UpdatePanel 下，以防止整页刷新...

标签： c# jquery append bootstrap-modal

【解决方案1】：

使用下面的代码解决问题

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", "");    
    }
});

【讨论】：