javascript - 函数在没有调用函数的类的情况下工作

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(){...} 将再次执行。问题是为什么会这样？我不需要这种行为。我想要这个只有当类是 div-image 而不是 div-image-big 时函数才有效。谢谢。

Answer 1

事件处理程序绑定(bind)在元素上，而不是类。它绑定(bind)到哪些元素取决于事件绑定(bind)时它们具有的类，因此稍后更改类不会更改哪些元素具有事件处理程序。

如果您希望事件处理程序对类作出 react ，您应该将委托(delegate)绑定(bind)到父元素。这样事件就会冒泡到父元素，委托(delegate)处理程序将在此时检查该类。示例:

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