on.click not working on class I added with .addclass

Question

I'm trying to use a jquery .click function on a class I've added to the same div on a previous .click. The new class is adding to the div correctly but my $( ".two" ).click(function() isn't running. My first $(".one").click(function) is working perfectly. I'm wondering if I'm using weird logic or if something is out of order. Any help would be greatly appreciated!

<script>

$(document).ready(function() {    
  $( ".one" ).click(function() {
   $('.adventurevideoviewmore').addClass('two');
   $( ".adventure2" ).slideDown( 1000, function() {
   });
 });

 $( ".two" ).click(function() {
  $( ".adventure3" ).slideDown( 1000, function() {
  });
 });

});

</script>

here's my HTML

 <div class="adventure2"></div>
 <div class="adventure3"></div>
 <div class="adventurevideoviewmore one" ><img src="images/homepage/viewmorebutton.png"/></div>

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Ruan Mendes, Jan 06 '15 at 19:09

score 1 · Answer 1 · edited Jan 06 '15 at 19:06

1

you need to use event delegation:

 $( "body" ).on('click', '.two', function() {
    $( ".adventure3" ).slideDown( 1000, function() {
 });

edited Jan 06 '15 at 19:06

Oleksandr T.

76,493
17
173
144

answered Jan 06 '15 at 19:05

Milind Anantwar

81,290
25
94
125

For an explanation, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Ruan Mendes Jan 06 '15 at 19:09
Thank you for this Milind Anantwar and thank you for the reference on the explanation Juan! I ended up adding a .delay to my code so .adventure3 slidedown wasn't triggered at the same time of the .adventure2 slidedown. – Wing Jan 06 '15 at 20:07

score 0 · Accepted Answer · answered Jan 06 '15 at 20:15

Your $('.two') click function is running on $(document).ready(), but no elements exist with that class at that time so the function is not bound to anything. What you need to do is add a click handler to the element at the time you are adding the .two class at the end of the animation:

$(document).ready(function() {    
    $( ".one" ).click(function() {
        $('.adventurevideoviewmore').addClass('two');
        $( ".adventure2" ).slideDown( 1000, function() {
            $( ".two" ).click(function() {
                $( ".adventure3" ).slideDown( 1000, function() {});
            });
        });            
    });
});

This may cause you headaches though since the user can still click the .one element and have the handler added again. It looks like you are trying to create a wizard of some kind. If so, I suggest taking a slightly different approach.

HTML

Wrap the adventure is some kind of container if it isn't already

<div class="adventure-wizard" data-step="1" data-last="3">
    <div class="adventure1"></div>
    <div class="adventure2"></div>
    <div class="adventure3"></div>
    <div class="adventurevideoviewmore"><img src="images/homepage/viewmorebutton.png"/></div>
</div>

JavaScript

Maintain the state in data on the container instead of classes on elements. This allows your view more button to always use the same handler and increment the wizard along.

$(document).ready(function() {

        // Setup the click event on the view more button to increment the step and
        // animate the appropriate adventure element until the last is reached
        $('.adventureviewmore').click(function () {
            var wizard = $(this).parent();
            var step = wizard.data('step');
            var last = wizard.data('last');

            // If the end is reached do nothing
            if (step === last)
                return;

            // Increment the step
            step++;

            // Animate the adventure for the next step
            $('.adventure' + step).slideDown(1000);

            // Store the step back on the wizard
            wizard.data('step', step);
        });
    });
});

score 0 · Answer 3 · answered Jan 06 '15 at 20:23

0

I needed to add a .delay when I added my 2nd 'two' class so the .adventure3 slide wouldn't trigger at the same time. Huge thanks to @Milind Anantwar, @Alexander, and @juan Mendes!

<script>
$( ".one" ).click(function() {
  $( ".adventure2" ).slideDown( 1000, function() {
  });

 $(".adventurevideoviewmore").delay(1000).queue(function(next){
  $(this).addClass("two");
  next();
 });
});

$( "body" ).on('click', '.two', function() {
  $( ".adventure3" ).slideDown( 1000, function() {
  });
});
</script>

Here's a fiddle of the working code: http://jsfiddle.net/cbart7421/j4er8r91/3/

answered Jan 06 '15 at 20:23

Wing

17
8

You shouldn't need that delay and instead should move the addition of the `.two` class inside the slideDown() callback function that is called when the animation completes. See http://jsfiddle.net/1Lvkmo2m/1/ – musicfuel Jan 06 '15 at 20:57
oh wow! I can't believe I missed that! Thank you @musicfuel! I'm still a little new to stackoverflow. How do I give someone credit for the answer? – Wing Jan 06 '15 at 21:37

on.click not working on class I added with .addclass

3 Answers3