无限滚动脚本无法识别 Jquery 事件答案

【问题标题】：Jquery events not recognised with infinite scroll script无限滚动脚本无法识别 Jquery 事件
【发布时间】：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 以更改我正在单击的所述子元素。

【问题讨论】：

标签： javascript jquery event-handling mouseevent infinite-scroll

【解决方案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()});

【讨论】：