How can I make my jQuery code work for dynamically loaded HTML?

Question

I have the following code:

<script type="text/javascript">
    $(function () {
        $(".wrapper1").scroll(function () {
            $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
        });
        $(".wrapper2").scroll(function () {
            $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
        });
    });
</script>

But my HTML is dynamic and added later. Is there a way that I can use this code outside of the dynamically added HTML so that it works after the HTML is loaded ?

Did any of the people who marked this as duplicate check to see if it works with the scroll event :-( — Alan2, Nov 25 '13 at 20:41

score 3 · Answer 1 · edited Nov 25 '13 at 19:19

3

You can use event delegation. Use

$(document).on('scroll', '.wrapper1', function () {

instead of

$(".wrapper1").scroll(function () {

and similarly for all the dynamically loaded elements.

More info here

edited Nov 25 '13 at 19:19

Kevin B

94,570
16
163
180

answered Nov 25 '13 at 19:16

karthikr

97,368
26
197
188

Unfortunately this does not work with the scroll event. – Alan2 Nov 25 '13 at 20:39
Ok.. can you please create a fiddle and post the link here ? – karthikr Nov 25 '13 at 20:43
Have you tried using `window` instead of `document`? – DevlshOne Nov 26 '13 at 02:34

score 1 · Answer 2 · answered Nov 25 '13 at 19:17

1

Take a look at the .on() property to delegate dynamically created elements.

answered Nov 25 '13 at 19:17

DevlshOne

8,357
1
29
37

How can I make my jQuery code work for dynamically loaded HTML?

2 Answers2