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

I am using the following code to route click events on an img tag to an input radio below it. The code works perfectly on Chrome and other browsers, but on IE (specifically IE 11) I must double click to get the radio selected instead of just single click to get the radio input selected. Can someone please tell me what I am doing wrong, missing here? Thanks

我使用以下代码将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>

Notes: - I also noticed that I don't have to double click as normal double click, but it has to be two clicks. Meaning one click then I can wait for like 10-15 seconds then do the 2nd click to get the click event routed to the radio input.

注意: - 我也注意到我不必像普通双击一样双击,但必须两次点击。意思是一次点击然后我可以等待10-15秒,然后进行第二次点击以将点击事件路由到无线电输入。

11 个解决方案

#1

Have you tried using a label tag with a for attribute for this feature instead, this could solve your problem and be more browser compatible.

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

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

I can understand if this doesn't achieve what you need, but using this method should work using HTML markup instead of jQuery

我可以理解,如果这不能达到您的需要,但使用此方法应该使用HTML标记而不是jQuery

relatively horrible jsfiddle demoing this: http://jsfiddle.net/andyface/d25KS/

相对可怕的jsfiddle演示这个:http://jsfiddle.net/andyface/d25KS/

#2

http://jsfiddle.net/89wTk/

You should use .prop(); when dealing with checkbox/radio inputs.

你应该使用.prop();处理复选框/无线电输入时。

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

#3

I remember that some version of IE don't support clicking objects other than links or buttons :(

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

Perhaps try using:

也许尝试使用:

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

or

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

as a work around

作为一种解决方法

#4

Just simple, you don't have to use any Jquery for this, just keep everything inside the label:

简单来说,您不必为此使用任何Jquery,只需将所有内容保留在标签内:

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

Working here: http://jsfiddle.net/fals/3phf4/

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

#5

Your code example works fine in IE11 (desktop and metro). Is it possible that there is another click event on the page that is capturing and preventing the click event on the image? Maybe something is causing the page to lose focus (first click gets window focus second clicks the image)? Try putting an alert in the click function to see if the click is getting registered. If that's not the issue, try running the body of the function in the console to see if that is the issue. You might try other ways to trigger the event, as suggested by others. Or try the jQuery .triggerHandler("click") method.

您的代码示例在IE11(桌面和地铁)中正常工作。是否有可能页面上有另一个点击事件正在捕获并阻止图像上的点击事件?也许某些东西导致页面失去焦点(首次点击获取窗口焦点第二次点击图像)?尝试在点击功能中发出警报以查看点击是否已注册。如果这不是问题,请尝试在控制台中运行该函数的主体以查看是否存在问题。您可以尝试其他方式来触发事件,如其他人所建议的那样。或者尝试使用jQuery .triggerHandler(“click”)方法。

#6

I think your problem may be with your markup. You have your image and click events inside a label.

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

According to w3schools: "...if the user clicks on the text within the element, it toggles the control." http://www.w3schools.com/tags/tag_label.asp

根据w3schools的说法:“......如果用户点击元素中的文本,它会切换控件。” http://www.w3schools.com/tags/tag_label.asp

That toggle is perhaps messing with your javascript. Try moving the markup outside of the label and see if that helps.

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

#7

That's an easy one :).

那是一个简单的:)。

The #img1 is encapsulated inside the

#img1封装在内部

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

So, without the jQuery part it's already working. Now when having the jQuery part, a single click will become a double click: 1) 'for' element of label_radio 2) the trigger in jQuery part

所以,没有jQuery部分,它已经在工作了。现在当拥有jQuery部分时,单击将成为双击:1)'for'for label_radio 2)jQuery部分中的触发器

So, for x-browser, you should not wrap the img inside the label. Or try to cancel the event in $('#Img1').click(function(event) { ...

所以,对于x-browser,你不应该将img包装在标签内。或者尝试在$('#Img1')中取消事件。点击(function(event){...

#8

You have both your img and radio wrapped in label. HTML's default behavior is that click on label triggers radio/checkbox inside.

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

There are two ways you can solve your problem:

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

1. Remove javascript function altogether.

完全删除javascript函数。

2. If there's additional reason for javascript, change your html markup, and move radio outside of the label. Also remove for attribute, cause it triggers radio selection. Something like this:

   如果还有javascript的其他原因,请更改您的html标记,并将无线电移到标签之外。同时删除属性,导致它触发无线电选择。像这样的东西:

   <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>
   

#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"/>  

#10

I am facing the same issue and its very weird .... the workaround that is working for me is that instead of using the trigger function .. put the code which is executed in the trigger click event in a javascript function and call that function instead of trigger event ... example is given below. For this example i will use an alert in case of a click on the element with id radio1.

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

Please let me know if this is helpfull

如果这有用,请告诉我

#11

Try to use .click() instead of .trigger('click'):

尝试使用.click()而不是.trigger('click'):

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

it should work, see here for more info

它应该工作,请看这里了解更多信息