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

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

<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（桌面和地铁）中运行良好。是否有可能页面上有另一个点击事件正在捕获并阻止图像上的点击事件？也许是某些东西导致页面失去焦点（第一次点击获取窗口焦点第二次点击图像）？尝试在点击功能中发出警报以查看点击是否已注册。如果这不是问题，请尝试在控制台中运行该函数的主体以查看是否存在问题。您可以尝试其他方式来触发事件，如其他人所建议的那样。或者尝试使用jQuery .triggerHandler（“click”）方法。

Answer 6

我认为您的问题可能与您的标记有关。您有图像并在标签内单击事件。

根据w3schools：＆＃34; ...如果用户点击元素中的文本，它会切换控件。＆＃34; http://www.w3schools.com/tags/tag_label.asp

那个切换可能会搞乱你的javascript。尝试在标签外移动标记，看看是否有帮助。

Answer 7

这很容易：）。

＃img1封装在

中

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

因此，如果没有jQuery部分，它已经在工作了。现在有了jQuery部分，单击就会变成双击： 1）＆＃39; for＆＃39; label_radio的元素 2）jQuery部分中的触发器

因此，对于x-browser，你不应该将img包装在标签内。或者尝试在$（＆＃39;＃Img1＆＃39;）中取消活动。点击（功能（事件）{...

Answer 8

您img和radio都包含在label中。 HTML的默认行为是单击标签触发内部的radio / checkbox。

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

完全删除javascript功能。

如果有其他原因需要javascript，请更改您的html标记，并将广播移到标签之外。同时删除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

我面临同样的问题而且非常奇怪....对我有用的解决方法是不使用触发器功能..将在触发器点击事件中执行的代码放在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>

它应该有效，请参阅here了解更多信息

JQuery .trigger点击事件在IE下无效

11 个答案: