无限滚动脚本无法识别 Jquery 事件
Posted
技术标签:
【中文标题】无限滚动脚本无法识别 Jquery 事件【英文标题】：Jquery events not recognised with infinite scroll script 【发布时间】：2021-06-09 22:24:12 【问题描述】：我最近在 tumblr 上一直在摆弄 JQuery，我意识到我一直遇到问题的一件事是，我拥有的无限滚动脚本没有用我的 Jquery 脚本标记新帖子已设置单击时如何处理帖子，无论它是否具有我的脚本正在寻找的相同类名，或者位于 html 的末尾。那么，我将如何将它与新的 HTML 元素相关联？
<script>
$(".window").click(function()inactiveall(); cal = cal + 1; $(this).css("z-index", cal);
$(this).find(".title-bar-98").css("background-image", curactiveheader); $(this).find(".title-bar-text").css("color", curactivetitle); tumblractive());
function tumblractive() desktop.left = "0px"; document.body.style.overflowY = "scroll";
tumblrButtonOpen = false; tumblrtaskbar.backgroundImage = github + "img/scrollbarempty.png')";
docelem.style.setProperty('--taskbar1top1', curcolgray); docelem.style.setProperty('--taskbar1top2', curcolblack);
docelem.style.setProperty('--taskbar1bottom1', curcolwhite); docelem.style.setProperty('--taskbar1bottom2', curcollightg)
function tumblrminimize() tumblrButtonOpen = true; inactiveall(); desktop.left = "-20000px"; document.body.style.overflowY = "hidden"
</script>
这是一般的页面设置；
<html>
<body>
<div id="desktop" style="width:1010px; margin-top:20px;">
block:Posts
<div class="window" style="width: 475px; max-width: 475px; margin-bottom: 20px; margin-right: 20px; position: absolute">
<div class="win98titlebarbutton"><div class="close"></div></div>
<div class="win98titlebarbutton"> <div class="maximize"></div></div>
<div class="win98titlebarbutton" onclick="tumblrminimize();"> <div class="minimize"></div></div>
<div class="win98titlebarbutton" onclick="twilightload()"> <div class="help"></div></div>
<div class="title-bar-98"><div class="title-bar-text" id="tumblrtext">???? very.vunnies on Tumblr - Internet Explorer</div></div>
<div class="window-body">
<!-- post data here -->
</div>
</div>
/block:Posts
</div>
</body>
</html>
所以我的主要问题是这个；当呈现为具有 JQuery 脚本时，我将如何更新帖子，就像前 10 个帖子一样？更确切地说;为什么会有这个问题？我的假设是，Jquery 根本不需要重新检查页面以查看要检查的优化原因，或者脚本不知道将两者关联起来。
JQuery 有点新，我一直在避免使用它，因为在 3 个月前甚至没有任何 HTML 经验。但是，环顾四周，我找不到很多关于其他人遇到同样问题的信息，我假设是因为使用此类脚本的人通常不会将一百万行 js 绑定到他们。
任何指针都会很棒，谢谢！
编辑：我一直在尝试各种解决方案，例如；
document.querySelector('#desktop').addEventListener('click', handler, false);
function handler(e)
calupdate(); tumblractive(); $(this).css("z-index", cal);
$(this).find(".title-bar-98").css("background-image", curactiveheader);
$(this).find(".title-bar-text").css("color", curactivetitle)
问题在于它可以工作，但只处理 .desktop 元素的第一个子元素，也就是。第一个窗口元素，而不是页面的其余部分。因此，如果这将是我必须使用的解决方案，那么有什么最佳方法可以获取所述元素的 ID 以更改我正在单击的所述子元素。
【问题讨论】：
【参考方案1】：我只是将我的脚本推入无限滚动脚本中。
$(document).ready(function()
var infScr = $('body').hasClass('infinite_scrolling'), twoCol = $('body').hasClass('two_column'), $container = $('#desktop');
if( infScr && twoCol )
$container.imagesLoaded(function()$container.masonry(itemSelector:'.window', isAnimated: true));
$container.infinitescroll(itemSelector: '.window', function(newElements)
var $newElems = $( newElements ).hide()
var height = $(".window").find(".photoset").attr("height")
$(".window").find(".photoset").css("height", height + "px")
$(this).find(".title-bar-98").css("background", "linear-gradient(90deg, " + curtbgradinactive1 + "," + curtbgradinactive2 + ")")
$(".window").click(function()calupdate(); tumblractive(); $(this).css("z-index", cal); var desktopleft
$(this).find(".title-bar-98").css("background", "linear-gradient(90deg, " + curtbgradactive1 + "," + curtbgradactive2 + ")")
$(this).find(".title-bar-text").css("color", curactivetitle));
$(".plinks-con").click(function()if (plinksdrop == false)$(this).find("postdrop").css("margin-left", "49px"); plinksdrop = true
else if (plinksdrop == true)$(this).find("postdrop").css("margin-left", "-20000px"); plinksdrop = false)
$(".plinks-con").mouseleave(function()$(this).find("postdrop").css("margin-left", "-20000px"); plinksdrop = false)
$newElems.imagesLoaded(function() $newElems.show()
var $newElemsIDs = $newElems.map(function () return this.id).get()
$container.masonry('appended', $newElems)))
window.setInterval(updateClock, 6000); updateClock());
【讨论】：
以上是关于无限滚动脚本无法识别 Jquery 事件的主要内容，如果未能解决你的问题，请参考以下文章