我有两个类和一个与其中一个类一起使用的函数
$('.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 时,该函数才起作用。谢谢。
最佳答案
事件处理程序绑定(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');
});
关于javascript - 函数无需调用函数的类即可工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13370452/