CODEWITHSUNDEEP
jqueryscroll
PSR
PSR

Reputation: 40318

scroll() in not working in jQuery for dynamic elements

I am using the following.This is not working for dynamically created elements.I am usinh jQuery 1.4.2

 $(".wrapper1").live("scroll",function(){
     alert(123);
    $(".wrapper2")
    .scrollLeft($(".wrapper1").scrollLeft());
  });

This is also not working for normal elements also.(Which are loaded while the page loading)

What might be the reason here .Please help me.Thanks in advance....

Upvotes: 3

Views: 5741

Answers (4)

Alireza Bijantabar
Alireza Bijantabar

Reputation: 514

No difference in dynamically generated elements, this code works for me:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

In this HTML:

<div id="div1">
    <div id="dynamicallyGeneratedDiv1"></div>
    <div id="dynamicallyGeneratedDiv2"></div>
</div>

No matter how many "dynamicallyGeneratedDiv" you insert into "div1", it will automatically scroll down to the bottom of "div1".

Upvotes: 0

skwidbreth
skwidbreth

Reputation: 8404

In my app, I have a button that appends form fieldsets to the body every time a button is clicked - I wanted to scroll the page down to the new element, but that didn't work for obvious reasons (bubbling, etc.). I came up with a simple fix...

function scroll(pixels){
    $('html, body').animate({
        scrollTop: pixels
    }, 1000);
};

function addObservation(x){
    $('body').append(x);
    newFieldSet = $('fieldset').last();
    pixelsFromTop = newFieldSet.offset().top;
    scroll(pixelsFromTop);
};

$(document).on("click", "#add_observation", function(){
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});

So every time you add a fieldset, .offset().top measures how many pixels the fieldset is from the top and then scrolls the window that distance. In your case, you could do pixelsFromLeft = newFieldSet.offset().left and replace scrollTop with scrollLeft, or something to that effect.

Upvotes: 0

vinczemarton
vinczemarton

Reputation: 8156

I know that you solved your problem (or you think you solved it), but if you have some problems you should know:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

This is from the jQuery documentation.

There are 2 ways to use the .on() function:

  1. $('selector').on('event', function () { body of the handler });

    The event handler is directly attached to the matched elements. Since it's done imperatively, the selector is resolved and all the matched elements get an attached event handler. It's the same as calling $('.asdf').click() for example.

  2. $('selector1').on('event', 'selector2', function () { handler });

    As you can see there is 2 selectors: The event handler will be attached to selector1, but it will handle the events fired on selector2! This is very much like .live() or .delegate(), (actually it's exactly the same).

    What .live() does is it attaches the event handler to 'document', and handles the events of the elements matched by the selector (it's the same as $('document').on('event', 'selector', function() {});).

    The benefit of this is that the event handler is attached to an already existing element and that will be able to handle the events of dynamically created elements through event bubbling.

    So in your case the second syntax seems to be what you need.

EDIT: There is a big problem with this I was not aware of: the scroll element is not bubbling. There are workarounds, but I have no time to write a solution now. Let me get back at it, when I return in about a few hours. Or if dystroy's solution is working, please don't hesitate to accept it.

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382130

Browsers change, jQuery bugs are fixed, that's two reasons why it's important to always use a recent version of jQuery (after due tests, you can't just point to latest).

Your code, adapted to jQuery 1.9, would be, for another event type,

$(document).on("event_type",".wrapper1", function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});

The reason to use $(document) as receiver and not $(".wrapper1") is that only the elements existing at binding time would receive and delegate the events. on doesn't work like the old live.

Except that this won't work for scroll events as they don't bubble.

So the most reasonnable solution I can propose would be to define a function :

$.fn.bindScrollHandler1 = function(){
    $(this).on('scroll', function(){
       $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
    });
}

and call it at start :

$('.wrapper1').bindScrollHandler1();

and each time you create a new .wrapper1 element :

myNewElement.bindScrollHandler1();

Demonstration

Note that your complete logic seems a little lacking, as you don't pair the scrollbars but make them all work the same.

Upvotes: 8

Related Questions