nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复评论区回复按钮页面刷新后第一次点击无效的问题

Browse Source 
- 使用原生 document.addEventListener 替代 jQuery 事件委托绑定回复按钮点击事件
- 原生事件监听器在 DOM 解析完成后立即生效，不依赖 jQuery 初始化状态
- 添加 element.closest() 实现事件委托，兼容动态加载的评论
- 保留 jQuery 事件绑定用于 PJAX 相关功能
- 添加 offset() 防护检查避免元素未渲染时报错
This commit is contained in:
nanhaoluo
2026-01-16 20:52:58 +08:00
parent c737bc4089
commit 2da70526ea
1 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
argontheme.js
View File

@@ -980,16 +980,23 @@ if (argonConfig.waterflow_columns != "1") {
}else{ }else{
$("#post_comment").addClass("post-comment-force-privatemode-off"); $("#post_comment").addClass("post-comment-force-privatemode-off");
} }
$("body,html").animate({
scrollTop: $('#post_comment').offset().top - 100 // 滚动到评论框（添加防护检查）
}, 400, 'easeOutCirc'); let postComment = $('#post_comment');
if (postComment.length > 0 && postComment.offset()) {
$("body,html").animate({
scrollTop: postComment.offset().top - 100
}, 400, 'easeOutCirc');
}
// 使用 CSS 动画显示回复框 // 使用 CSS 动画显示回复框
let replyInfo = $('#post_comment_reply_info'); let replyInfo = $('#post_comment_reply_info');
replyInfo.removeClass('reply-leaving').css('display', 'block'); if (replyInfo.length > 0) {
// 触发重排以确保动画生效 replyInfo.removeClass('reply-leaving').css('display', 'block');
replyInfo[0].offsetHeight; // 触发重排以确保动画生效
replyInfo.addClass('reply-entering'); replyInfo[0].offsetHeight;
replyInfo.addClass('reply-entering');
}
setTimeout(function(){ setTimeout(function(){
$("#post_comment_content").focus(); $("#post_comment_content").focus();
@@ -1010,9 +1017,15 @@ if (argonConfig.waterflow_columns != "1") {
$("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off");
} }
$(document).on("click" , ".comment-reply" , function(){ // 使用原生事件委托确保第一次点击也能响应
reply(this.getAttribute("data-id")); document.addEventListener('click', function(e) {
let target = e.target.closest('.comment-reply');
if (target) {
reply(target.getAttribute('data-id'));
}
}); });
// 保留 jQuery 事件绑定用于 PJAX 兼容
$(document).on("click pjax:click" , "#post_comment_reply_cancel" , function(){ $(document).on("click pjax:click" , "#post_comment_reply_cancel" , function(){
cancelReply(); cancelReply();
}); });
@@ -3754,7 +3767,8 @@ void 0;
} }
function initRippleEffect() { function initRippleEffect() {
var rippleElements = document.querySelectorAll('.btn, .card, .nav-link, .dropdown-item, .page-link, .leftbar-mobile-menu-item > a, .leftbar-mobile-action, .fabtn, .comment-reply, .tag, .badge'); // 排除大尺寸卡片（文章、评论区、相关文章、页脚等），避免触摸时产生布局问题
var rippleElements = document.querySelectorAll('.btn, .card:not(article.post):not(#comments):not(#post_comment):not(.related-posts):not(.post-navigation):not(#footer), .nav-link, .dropdown-item, .page-link, .leftbar-mobile-menu-item > a, .leftbar-mobile-action, .fabtn, .comment-reply, .tag, .badge');
rippleElements.forEach(function(el) { rippleElements.forEach(function(el) {
if (el.dataset.rippleInit) return; if (el.dataset.rippleInit) return;
el.dataset.rippleInit = 'true'; el.dataset.rippleInit = 'true';