Как получить JQuery.trigger («клик»); инициировать щелчок мышью


145

Мне трудно понять, как имитировать щелчок мыши с помощью JQuery. Может кто-нибудь, пожалуйста, сообщите мне, что я делаю неправильно.

HTML:

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

JQuery:

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

Демо: FIDDLE

когда я нажимаю на кнопку #foo, я хочу смоделировать щелчок на #bar, однако, когда я пытаюсь это сделать, ничего не происходит. Я тоже пытался, jQuery(document).ready(function(){...})но безуспешно.


2
jQuery triggerработает только если добавлено событие jQuery click. В противном случае вы не сможете ничего сделать таким образом;
Реза Мамун

3
Это мера безопасности, встроенная в браузер. См. Ответ @ Blazemonger: stackoverflow.com/questions/7999806/…
sanchez

1
@ san.chez Интересно, спасибо за информацию, раньше не знал об этой мере безопасности!
личный код

Ответы:


277

Вам нужно использовать jQuery('#bar')[0].click(); для имитации щелчка мышью фактический элемент DOM (не объект jQuery) вместо использования .trigger()метода jQuery.

Примечание: DOM Level 2 .click()не работает с некоторыми элементами в Safari . Вам нужно будет использовать обходной путь.

http://api.jquery.com/click/


18
вы сохранили мой день $ ('# asd') [0] .click ();
waza123

Используйте это, чтобы перейти на следующую вкладку в полях ACF jQuery: $ ('. Next'). Click (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button) ') [0] .click ();});
Тиш

1
Спасибо. Работает на рабочем столе. Но на мобильном телефоне (Android Chrome) это не так. какие-либо предложения?
kk-dev11

По какой-то причине это уничтожает хэш в текущем URL.
Луис

1
если бы один из hrefs в теге <a был '#', это бы сделало это. <a обычно перенаправляет на другой URL. Вы должны остановить его с помощью ev.preventDefault () и ev.stopPropagation (), прежде чем ваш обработчик кликов вернется. ИЛИ, используйте другой тег кроме <a; Вы можете прикрепить обработчики кликов ко всему, что видно.
OsamaBinLogin

43

Вам просто нужно поместить небольшое событие тайм-аута, прежде чем делать .click() это так:

setTimeout(function(){ $('#btn').click()}, 100);

Отлично работает, если вы пытаетесь смоделировать щелчок при загрузке страницы.
Габриэль Дзул

33

Это поведение JQuery. Я не уверен, почему это работает таким образом, он только запускает функцию onClick по ссылке.

Пытаться:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});

Спасибо за объяснение. Очень раздражающее поведение jQuery, но ваш код работает.
личный код

Не раздражает вообще. trigger()предназначен для выполнения JavaScript- части события click . Это очень похоже на создание, function var() {}которое используется повторно несколько раз.

21

Смотрите мое демо: http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

Я бы завернул this.click();вelse if(this.click)
Алекс W

15

Может быть полезно:

Код, который вызывает триггер, должен идти после вызова события.

Например, у меня есть некоторый код, который я хочу выполнить при изменении значения #expense_tickets, а также при перезагрузке страницы

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})

4
Ах, это тоже была моя проблема! Был сбит с толку относительно того, почему trigger()не работает. Оказывается, у меня был установлен код триггера выше функции, которую он вызывал - так что хук на самом деле не был на месте. Doh!
Эндрю Ньюби

5

jQuery .trigger('click');будет вызывать событие только для этого события, а также не будет запускать действие браузера по умолчанию.

Вы можете симулировать ту же функциональность с помощью следующего JavaScript:

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});


0

Я попробовал два верхних ответа, у меня не получилось, пока я не удалил «display: none» из элементов ввода моего файла. Затем я вернулся к .trigger (), он также работал в Safari для Windows.

Итак, вывод, не используйте дисплей: нет; чтобы скрыть ввод файла , вы можете использовать вместо этого opacity: 0.


0

Технически это не ответ на этот вопрос, но хорошее использование принятого ответа ( https://stackoverflow.com/a/20928975/82028 ) для создания кнопок next и prev для вкладок в полях ACF jQuery:

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});


-3

Вы не можете смоделировать событие клика с помощью JavaScript. .trigger()Функция jQuery запускает только событие с именем «click» для элемента, которое вы можете захватить с помощью .on()метода jQuery.


9
«Вы не можете смоделировать событие клика с помощью JavaScript» - да, вы можете .
nnnnnn

Неправильно ... вы можете смоделировать событие щелчка с помощью javascript / jquery, и вы можете захватить событие щелчка триггера с помощью .click без включения.
Aerious
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.