Scroll () does not work in jQuery for dynamic elements

Question

I am using the following. This does not work for dynamically created elements. I am usinh jQuery 1.4.2

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

This also does not work for ordinary elements. (which load when the page loads)

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

Answer 1

Browsers are changing, jQuery errors have been fixed, so there are two reasons why it is important to always use the latest version of jQuery (after testing, you cannot just point to the latest).

Your code adapted for jQuery 1.9 will be for a different type of event

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

The reason for using $(document) as the receiver, rather than $(".wrapper1") is that only elements that exist during the binding will receive and delegate events. on doesn't work like old live .

Except that this will not work for scroll events as they do not bubble.

Therefore, the most sensible solution I can offer would be to define a function:

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

and name it at the beginning:

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

and every time you create a new .wrapper1 element:

 myNewElement.bindScrollHandler1(); 

Demonstration

Please note that your complete logic seems a bit inadequate as you are not pairing the scrollbars, but making them work the same.

Answer 2

I know that you have solved your problem (or think you have 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 when your code makes a .on() call.

This is from the jQuery documentation .

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

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

  The event handler is directly attached to the corresponding elements. Since this is done imperatively, the selector is enabled, and all matched elements receive an attached event handler. This is the same as calling $('.asdf').click() .

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

  As you can see, there are two selectors: an event handler will be attached to selector1, but it will handle events fired on selector2! This is very similar to .live() or .delegate() , (in fact it is the same).

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

  The advantage of this is that the event handler is attached to an existing element and can handle events of dynamically created elements through event bubbles.

  So, in your case, the second syntax seems to you necessary.

EDIT . There is a big problem with this that I did not know about: the scroll element does not bubble. There are workarounds, but I don’t have time to write a solution now. Let me get back to him when I get back in a few hours. Or, if the dystroy solution works, please feel free to take it.

Answer 3

In my application, I have a button that adds field shapes to the body every time the button is clicked. I wanted to scroll to the new item, but this doesn’t work for obvious reasons (bubbles, etc.) ..). I came up with a simple solution ...

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

Thus, each time you add a set of fields, .offset().top measures how many pixels the set of fields has on top, and then scrolls the window by that distance. In your case, you can do pixelsFromLeft = newFieldSet.offset().left and replace scrollTop with scrollLeft , or something like that.