没有调用函数的类的函数工作

Question

我有两个类和一个与其中一个一起使用的函数

$('.div-image').click(function(){                    // image zoom 
    $('#image').attr("src",img_src);

    $('.div-image').attr('class','div-image-big');

});

和html类似:

<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>

为什么在第一次点击图像或(div .div-image)后,我的类div-image正在变为div-image-big.但是如果我们再次单击函数$('.div-image').click(function(){...}将再次执行.问题是为什么呢？我不需要这种行为.我想要这个函数只在class是div-image而不是div-image-big时工作.谢谢.

Answer 1

事件处理程序绑定在元素上,而不是类.它绑定的元素是基于它们绑定事件时所具有的类来决定的,因此稍后更改类不会更改哪些元素具有事件处理程序.

如果希望事件处理程序对类做出反应,则应将委托绑定到父元素.这样事件就会冒泡到父元素,委托处理程序将在那一刻检查类.例:

HTML:

<div class="image-container">
  <div class="div-image">
    <div id="wrapper">
      <img id="image" src="image.jpg">
    </div>
  </div>
</div>

使用Javascript:

$('.image-container').on('click', '.div-image' ,function(){                    // image zoom 
  $('#image').attr("src",img_src);
  $('.div-image').attr('class','div-image-big');
});