jQuery .trigger单击事件在IE下不起作用

Question

我正在使用以下代码将img标签上的点击事件路由到其下方的输入单选按钮。 该代码可以在Chrome和其他浏览器上完美运行，但是在IE（特别是IE 11）上，我必须双击才能选择单选，而不仅仅是单击才能选择单选。 有人可以告诉我我做错了什么，想念这里吗？ 谢谢

<script type="text/javascript">
   $(document).ready(function() {
       $('#Img1').click(function() {
          $('#radio1').trigger('click');
       });
   });
</script> 




      <div class="imagesPrev col four center">
        <label class="label_radio images" for="radio1">
      <div class="labelText">
            <img id="Img1"src="image1.gif" alt="Image 1" />
            <input type="radio" id="radio1" name="radio1" value="image1"/>      
      </div>
      <div style="height:10px;"></div>
             Image Title <br/>
        </label>
      </div>

注意：-我也注意到我不必像普通双击一样双击，但必须单击两次。 意思是单击一次，然后我可以等待10-15秒钟，然后单击第二次，以将点击事件路由到单选输入。

Answer 1

http://jsfiddle.net/89wTk/

您应该使用.prop（）; 处理复选框/无线电输入时。

   $(document).ready(function() {
       $('#Img1').click(function() {
           var checkBox = $("#radio1");
           checkBox.prop("checked", !checkBox.prop("checked"));
       });
   });

Answer 2

您是否尝试过使用带有for属性的label标记来代替此功能，这可以解决您的问题并与浏览器更加兼容。

<label for="radio1"><img id="Img1"src="image1.gif" alt="Image 1" /></label>
<input type="radio" id="radio1" name="radio1" value="image1"/>

我可以理解这是否无法满足您的需求，但是使用此方法应该可以使用HTML标记而不是jQuery

相对可怕的jsfiddle进行了演示： http : //jsfiddle.net/andyface/d25KS/

Answer 3

我记得某些版本的IE不支持单击链接或按钮以外的对象:(

也许尝试使用：

$("#radio1").checked(true);

要么

$("#radio1").selected(true);

作为解决

Answer 4

很简单，您不必为此使用任何Jquery，只需将所有内容保留在label ：

<label for="radio_btn">
   <img id="img"src="image1.gif" alt="Image here" />
   <input type="radio" id="radio_btn" name="radio1" value="image1"/>
</label>

在这里工作： http : //jsfiddle.net/fals/3phf4/

Answer 5

您的代码示例在IE11（台式机和Metro）中可以正常工作。 页面上是否可能有另一个单击事件正在捕获并阻止图像上的单击事件？ 也许是某种原因导致页面失去焦点（第一次单击获得窗口焦点，第二次单击图像）？ 尝试在点击功能中添加警报，以查看点击是否已注册。 如果不是问题，请尝试在控制台中运行该函数的主体，以查看是否是问题所在。 您可以尝试其他方式触发事件，如其他人所建议。 或尝试使用jQuery .triggerHandler（“ click”）方法。

Answer 6

我认为您的问题可能出在您的标记上。 您将图像放在标签内并单击事件。

根据w3schools的说法：“ ...如果用户单击元素内的文本，则会切换控件。” http://www.w3schools.com/tags/tag_label.asp

该切换可能会使您的JavaScript混乱。 尝试将标记移到标签外，看看是否有帮助。

Answer 7

这是一个简单的:)。

＃img1封装在

<label class="label_radio images" for="radio1">

因此，没有jQuery部分，它已经可以工作了。 现在，当拥有jQuery部分时，单击将变成双击：1）label_radio的“ for”元素2）jQuery部分中的触发器

因此，对于x浏览器，您不应将img包装在标签内。 或者尝试取消$（'＃Img1'）。click（function（event）{...

Answer 8

您的img和radio包裹在label 。 HTML的默认行为是单击标签会触发内部的单选/复选框。

有两种方法可以解决问题：

1. 完全删除javascript函数。

2. 如果还有其他原因需要使用javascript，请更改您的html标记，然后将radio移到标签之外。 同时删除for属性，因为它触发无线选择。 像这样：

    <div class="imagesPrev col four center"> <label class="label_radio images"> <div class="labelText"> <img id="Img1"src="image1.gif" alt="Image 1" /> </div> </label> <input type="radio" id="radio1" name="radio1" value="image1"/> <div style="height:10px;"></div> Image Title </div> 

Answer 9

<script type="text/javascript">
   $(document).on('click','.Img1',function()
   {
      var checkBox = $(".radio1");
      checkBox.prop("checked", !checkBox.prop("checked"));
   });
</script>

<img class="Img1" src="image1.gif" alt="Image 1" />
<input type="radio" class="radio1" name="radio1" value="image1"/>  

Answer 10

我正面临着同样的问题，这很奇怪..对我而言，解决方法是不使用触发函数..将在触发click事件中执行的代码放在javascript函数中并调用该函数而不是触发事件...下面给出示例。 对于此示例，在单击ID为radio1的元素时，我将使用警报。

Event definition
$('#radio1').on('click',function () {
alert("Hi");
})
So Instead of using $('#radio1').trigger('click'); we can put the alert in a javascript function and call the javascript function where ever i am calling the trigger click event.

Javascript function 

function triggerClick(){
alert("Hi")
}

and just call this function(triggerClick()) where ever you are using $('#radio1').trigger('click');

请告诉我这是否有帮助

Answer 11

尝试使用.click （）而不是.trigger（'click'）：

<script> $(document).ready(function() { $('#Img1').click(function() { $('#radio1').click(); }); }); </script>

它应该可以工作，请参见此处以获取更多信息