Search code examples
javascriptjqueryevent-handlingmouseeventinfinite-scroll

Jquery events not recognised with infinite scroll script

I've been fiddling with JQuery recently on tumblr and one of the things I've realised i've been having problems with is the fact that the infinate scrolling script I have doesn't tag new posts with the Jquery script I have setup for how posts are handled when clicked on, regardless of it having the same class name which my script is looking for, or being at the end of the HTML. So, how would I go about assosiating this with the new HTML elements?

<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>

Here's the general page setup;

<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>

So my main issue is this; How would I go about updating posts when rendered in to have the JQuery script, much like the first 10 posts? Or rather; why does it have this problem? My assumption is that Jquery simply doesn't need to recheck the page to see what to check for optimisation reasons, either or the script doesn't know to assosiate the two.

This script basically makes all other windows inactive other than the selected one, and adjusts the post titlebar, font to show as active.

Kinda new to JQuery and I've been avoiding doing anything with it because of not having any experiance with even HTML prior to like 3 months ago. But, looking around I wasn't able to find much about anyone else having the same issue, and I'm assuming because people using scripts like this don't typically tie a million lines of js to them.

Any pointers would be brilliant, thank you!

Edit: I've been trying with various solutions such as;

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)
}

Problem being with this is that it works, but only addresses the first child of the .desktop element, aka. the first window element, and not with the rest of the page. So if this is going to be the solution I have to use, what optimal way is there to get the ID of said element to change said child I'm clicking on.

Solution

  • I just shoved my script into the infinate scroll script.

    $(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()});