Блог

Я использую следующий код для маршрутизации событий щелчка по тегу 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 секунд, а затем выполнить 2-й щелчок, чтобы событие щелчка было перенаправлено на радиовход.

http://jsfiddle.net/89wTk/

Вы должны использовать .prop(); при работе с флажками / радиовходами.

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

Пробовали ли вы вместо этого использовать 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 /

Я помню, что некоторые версии 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 (desktop и 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) элемент ‘for’ label_radio
2) триггер в части jQuery

Итак, для x-browser вы не должны переносить img внутри метки. Или попробуйте отменить событие в $(‘#Img1’).click(функция (событие) { …

У вас есть как ваш 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>
    

 <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 и вызовите эту функцию вместо события триггера … пример приведен ниже. Для этого примера я буду использовать оповещение в случае щелчка по элементу с идентификатором 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(‘щелчок’).:

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

это должно сработать, смотрите Здесь для получения дополнительной информации