Question

这很简单，但由于某种原因，第二段根本不起作用。点击一张卡片没有做任何事情。

$('.container__card').hover(function(){ 
    $(this).toggleClass('container__card container__card--hover')
});

$('.container__card--hover').click(function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

Answer 1

在动态添加类时，请使用jQuery event delegation

$(document).on('click' , '.container__card--hover', function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

工作代码段： -

$('.container__card').hover(function(){ 
   $(this).toggleClass('container__card container__card--hover')
});

$(document).on('click' , '.container__card--hover', function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

.container__card--hover{
  color:green;
  font-size:20px;
}
.container__card--selected{
  color:red;
  font-size:30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container__card">First hover and then click me please!</div>

Answer 2

试

$('.container__card').on("click", function(){
  $(this).toggleClass('container__card--hover')
});

检查示例：https://jsfiddle.net/xpvt214o/142428/

Answer 3

从

更新

 $('.container__card--hover').click(
        function(){
          $(this).toggleClass('container__card--selected container__card--hover');
        }
    );

到

 $(document).on('click' , '.container__card--hover', 
        function(){
          $(this).toggleClass('container__card--selected container__card--hover');
        }
    );

原因 - 在选择器运行以绑定元素时，元素上的元素和/或类可能不存在。因此，请使用动态元素。

供参考 - jQuery.on

jQuery：无法识别鼠标点击

3 个答案: