Як отримати 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 Цікаво, дякую за інформацію, раніше не знав про цей захід безпеки!
lickmycode

Відповіді:


277

Вам потрібно використовувати jQuery('#bar')[0].click(); для імітації клацання миші на фактичному елементі DOM (а не на об'єкт jQuery), а не використовувати .trigger()метод jQuery.

Примітка: рівень DOM 2 .click()не працює на деяких елементах Safari . Вам потрібно буде використовувати обхідне рішення.

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


18
ти врятував мій день $ ('# asd') [0] .click ();
waza123

Використовуйте це для натискання наступної вкладки на полях ACQ jQuery: $ ('. Наступний'). Натисніть (функція () {$ ('# первинний li.active'). Наступний (). Find ('. Acf-tab-button ') [0] .click ();});
Тиш

1
Дякую. Він працює в робочому столі. Але на мобільному (андроїд-хромі) це не так. будь-які пропозиції?
kk-dev11

Чомусь це знищує хеш у поточній URL-адресі.
luis

1
якщо один із hrefs у тезі <тег - '#', це зробить це. <зазвичай переспрямовує на іншу 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, але ваш код працює.
lickmycode

Зовсім не дратує. trigger()призначений для виконання розділу JavaScript події кліку . Це дуже схоже на створення цього 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)
Alex 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()не працює. Виявляється, у мене був встановлений код тригера ПРО НАД функцію, яку він викликав - значить, гак насправді не був на місці. До!
Ендрю Ньюбі

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 (), він також працював у сафарі для windows.

Отже, висновок: Не використовуйте дисплей: немає; щоб приховати вхід вашого файлу , ви можете використовувати непрозорість: 0.


0

Технічно не відповідь на це, але вдале використання прийнятої відповіді ( https://stackoverflow.com/a/20928975/82028 ) для створення наступних і попередніх кнопок для вкладок на полях ACQ 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();
});

0

Просто скористайтеся цим:

$(function() {
 $('#watchButton').click();
});

-3

Ви не можете імітувати подію натискання за допомогою javascript. .trigger()Функція jQuery запускає лише подію з назвою "клацання" на елементі, який ви можете захопити .on()методом jQuery.


9
"Ви не можете імітувати подію натискання за допомогою javascript" - Так, ви можете .
nnnnnn

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