on.click 无法处理 class 我添加了 .addclass

Question

我正在尝试在 class 上使用 jquery .click 函数，我已将其添加到上一个 .click 上的相同 div。新的 class 正确地添加到 div 但我的 $( ".two" ).click(function() 没有运行。我的第一个 $(".one").click(function ) 运行良好。我想知道我是否使用了奇怪的逻辑或者是否有问题。任何帮助将不胜感激！

<script>

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

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

});

</script>

这是我的 HTML

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

Answer 1

您需要使用事件委托：

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

Answer 2

您的 $('.two') 单击函数是 $(document).ready() 上的运行，但当时 class 不存在任何元素，因此该函数未绑定任何内容。您需要做的是在动画结束时添加 .two class 时向元素添加点击处理程序：

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

这可能会让您头疼，因为用户仍然可以单击 .one 元素并再次添加处理程序。看起来您正在尝试创建某种向导。如果是这样，我建议采取稍微不同的方法。

HTML

包装冒险是某种容器，如果它还没有的话

<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

维护容器数据的状态，而不是 class元素的状态。这允许您查看更多按钮始终使用相同的处理程序并增加向导。

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

Answer 3

我在添加第 2 个 'two' class 时需要添加一个 .delay，这样 .adventure3 幻灯片就不会同时触发。非常感谢@Milind Anantwar、@Alexander 和@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>

这是工作代码的 fiddle：http://jsfiddle.net/cbart7421/j4er8r91/3/

on.click 无法处理 class 我添加了 .addclass

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

jquery

onclick

slidedown