Question

以下是一个示例：http://jsfiddle.net/c8uywnpa/21/适用于其他浏览器，但IE（10）。当buttonset被包装在'form'元素中时，问题就出现了。请参阅包含的示例。

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

单击标签中的数字会触发更改事件，但如果单击标签中的图像则不会触发更改事件。非常感谢任何帮助。

Answer 1

我遇到了同样的问题。我没有使用jQuery。我用图片包裹了图片，所以我尝试添加一个：在伪元素之后。它覆盖了图像，因此在单击时，单击伪元素而不是图像。它对我有帮助。 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'事件未触发在图像上单击按钮组的形式

1 个答案: