jquery'change'事件未触发在图像上单击按钮组的形式 [英] jquery 'change' event not firing on Image-click for buttonset in form
问题描述
以下是一个例子: http://jsfiddle.net/c8uywnpa/21/ 在其他浏览器上,但IE(10)。
当一个buttonset包含在'form'元素中时,会出现问题。请参阅包含的示例。
Here is an example : http://jsfiddle.net/c8uywnpa/21/ which works on other browsers but IE (10). The issue comes when a the buttonset is wrapped within a 'form' element. Please see example included.
<b> Form - Click on image does not work, must click on number </b>
<form>
<div id="myRadio">
<input id="rf1" type="radio" name="myRadio" value="1" />
<label for="rf1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="rf2" type="radio" name="myRadio" value="2" />
<label for="rf2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
</form>
<hr>
<h3> No Form - Click on image works </h3>
<div id="myRadioNoForm">
<input id="r1" type="radio" name="myRadioNoForm" value="1" />
<label for="r1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="r2" type="radio" name="myRadioNoForm" value="2" />
<label for="r2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
$("#myRadio").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
$("#myRadioNoForm").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
单击标签中的数字会触发更改事件,但如果单击图像中则不会标签。非常感谢任何帮助。
Clicking on the numbers in the label fires the change event but does not if you click on the Image in the label. Any help is much appreciated.
推荐答案
我遇到了同样的问题。我没有使用jQuery。我用图片包裹了图片,所以我尝试添加一个:在伪元素之后。它覆盖了图像,因此在单击时,单击伪元素而不是图像。这对我有帮助。 ie9-11
I had the same problem. I'm not using jQuery. I had the image wrapped with the span, so I tried to add an :after pseudoelement to it. It covers the image, so when clicking, you click on the pseudoelement rather than on the image. And it helped for me. ie9-11
.image { position: relative; display: block;}
.image:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
<label for="answ">
<span class="image"><img src="image.jpg"></span>
</label>
这篇关于jquery'change'事件未触发在图像上单击按钮组的形式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!