JavaScript not working on dynamic content

Question

I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?

For example on the parent page's javascript I have:

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

and the 'child' page where HTML is loaded from

<li class="page"><a href="home" style="margin:0 22px 0 0" class="item">Home</a></li>
<li class="page"><a href="about" class="item">About Us</a></li>
<li class="page"><a href="store" class="item">Store</a></li>
<li class="page"><a href="news" class="item">News</a></li>
<li class="page"><a href="contact" style="margin:0 0 0 22px" class="item">Contact</a></li>

Your help would be greatly appreciated!

@akonsu sorry about that -- forgot one line of code. should be good now. — David
– David, Commented Mar 11, 2014 at 18:44
how you are transacting the animation,on what event you are calling this animation.i am not sure of the scenario but check live and delegate method in jquery api. — XciA
– XciA, Commented Mar 11, 2014 at 18:46
The javascript works fine on a static page (without dynamic load), so the () positions should be fine. There is also the background position jquery plugin that goes along with this, but that should be fine as well (unmodified)... any suggestions to make this work? — David
– David, Commented Mar 11, 2014 at 18:52
What do you mean by child page? Are you loading an iframe in there? — Adrian Salazar
– Adrian Salazar, Commented Mar 11, 2014 at 19:10

mgsipl · Accepted Answer · 2014-03-11 19:05:37Z

3

try using 'delegate' method instead of 'on'.

jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

answered Mar 11, 2014 at 19:05

mgsipl

1994 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

Perfect, awesome! The other answers may work as well, but this one was the first to try and works just like it should. Thanks again!

Banana · Accepted Answer · 2014-03-11 19:02:03Z

2

if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead. and when the new elements are loaded the action is already there.

jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

answered Mar 11, 2014 at 19:02

Banana

7,4843 gold badges25 silver badges44 bronze badges

Comments

Anubhav · Accepted Answer · 2014-03-11 18:51:12Z

0

try using:

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
    jQuery(this).stop().animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).stop().animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

answered Mar 11, 2014 at 18:51

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

Collectives™ on Stack Overflow

JavaScript not working on dynamic content

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related