如何解决无限滚动脚本无法识别 Jquery 事件
我最近在 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 以更改我正在单击的所述子元素。
解决方法
我只是将我的脚本推入无限滚动脚本中。
$(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"," + 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()});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
