JQuery .trigger click event在IE下不工作

JQuery .trigger click event not working under IE

本文关键字：工作 IE trigger click event JQuery      更新时间：2023-09-26

我使用以下代码将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秒，然后进行第二次点击，让点击事件路由到无线电输入

http://jsfiddle.net/89wTk/

你应该使用。prop();当处理复选框/单选输入时。

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

您是否尝试过使用带有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

比较可怕的例子:http://jsfiddle.net/andyface/d25KS/

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

可以试试:

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

或

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

作为

的工作

很简单，你不必为此使用任何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/

您的代码示例在IE11(桌面和metro)中运行良好。是否有可能在页面上有另一个正在捕获和阻止图像上的单击事件的单击事件?也许是什么东西导致页面失去焦点(第一次点击窗口焦点，第二次点击图像)?试着在点击功能中放一个警报，看看点击是否被注册。如果这不是问题，请尝试在控制台中运行函数体，看看是否存在问题。您可以尝试其他人建议的其他方法来触发事件。或者试试jQuery . triggerhandler ("click")方法

我想你的问题可能出在你的标记上。在标签中有图像和单击事件。

根据w3schools:"…如果用户单击元素中的文本，则会切换控件。"http://www.w3schools.com/tags/tag_label.asp

这个开关可能会扰乱你的javascript。尝试将标记移到标签之外，看看是否有帮助。

这很简单:)。

#img1被封装在

<label class="label_radio images" for="radio1">
所以，没有jQuery部分，它已经工作了。现在有了jQuery部分，点击一次就会变成双击:1)label_radio的'for'元素2) jQuery中的触发器部分

因此，对于x-browser，您不应该将img包装在标签中。或者尝试在$('#Img1')中取消事件。点击(function(event){…

您将img和radio都包装在label中。HTML的默认行为是点击标签触发内部的单选/复选框。

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

  1. 删除javascript函数。

  2. 如果有额外的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>

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

我也面临同样的问题，它很奇怪....为我工作的解决方案是，而不是使用触发功能…将在触发点击事件中执行的代码放在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');

如果有帮助请告诉我

尝试使用.click()代替。trigger('click'):

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

应该可以，更多信息请看这里

相关文章：