CODEWITHSUNDEEP
jqueryonclickslidedown
Wing
Wing

Reputation: 17

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

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>

Upvotes: 0

Views: 1384

Answers (3)

Wing
Wing

Reputation: 17

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/

Upvotes: 0

musicfuel
musicfuel

Reputation: 1680

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

you need to use event delegation:

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

Upvotes: 1

Related Questions