Як викликати натискання на посилання за допомогою jQuery


238

Я маю посилання:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

і я намагаюся запустити це за допомогою:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Але це не працює.

Я також спробував: $('#titleee a').trigger('click');

Редагувати :

Мені потрібно реалізувати все, що тут викликається <a href="#inline" rel="prettyPhoto">


7
location.href($('#titleee').find('a').attr("href"));?
Sylvain

3
або навіть $ ('ul.gallery'). find ('li> a'). тригер ('click');
CarneyCode

114
Хлопці Справжня відповідь така проста. $('#titleee a')[0].click();. Іншими словами, використовуйте метод клацання DOM, а не jQuery. Оновлення Грема Хоткіса !
Роман Старков

5
@romkyns не правильно, так як відкриття спливаючого вікна замість нової вкладки. але натискання на манекенний проміжок всередині цього тега "а" відповідає цілі
Шишир Арора,

1
Якщо ви намагаєтеся викликати подію на якірі, то наявний код буде спрацьовувати. $('ul#titleee li a[href="#inline"]').click();
Ананд Пал

Відповіді:


308

Якщо ви намагаєтеся викликати подію на якірі, то наявний у вас код буде спрацьований. Я відтворив ваш приклад у jsfiddle із доданим eventHandler, щоб ви могли побачити, що він працює:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Чи намагаєтесь ви змусити користувача перейти до певної точки веб-сторінки, натиснувши на якір, або ви намагаєтеся викликати пов’язані з ним події? Можливо, ви насправді не вдало прив'язали подію клацання до події?

Також це:

$('#titleee').find('a').trigger('click');

є еквівалентом цього:

$('#titleee a').trigger('click');

Знайти не потрібно. :)


16
@Kit .find () - швидший вибір, ніж те, що ви пропонуєте, зробіть орієнтир, якщо ви не згодні, але ваша пропозиція його сповільнює. позитивно :-)
Аді Нгом

14
@mashappslabs - Це добре. Я радий за вас, якщо ви відчуваєте необхідність робити передчасні та мікрооптимізації, незалежно від того, наскільки це правда. :)
Kit Sunde

5
@Kit ... тож коли ви робите заяву на зразок "не потрібно дзвонити знайти", вона не потрапляє у сферу передчасної оптимізації ?? Я думаю, що це так, але це просто відбувається повільніше, ніж було запропоновано спочатку. Я не відповідаю заради аргументації, а заради узгоджених зусиль, щоб покращити те, що ми всі любимо робити. Я сподіваюся, що це виходить правильно :-)
Аді Нгом

5
@mashappslabs - Перший раз, коли я побачив jsperf.com, я подумав, що повернусь і скажу, що ти маєш рацію, твій метод у загальному випадку швидший. Тільки Опера повільніше. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde

9
Як не дивно, вищезазначене не працює для мене, але відповідь @GrahamHotchkiss так і не відповідає.
Олівер

210

Вибачте, але обробник подій насправді не потрібен. Вам потрібно ще один елемент у тезі, на який потрібно натиснути.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

Це все про те, що ви клацаєте, і це не тег, а річ всередині нього. На жаль, JQuery, як видається, не розпізнає голий текст, але це ванільний javascript:

document.getElementById('test1').click(); // Works!

Або отримавши доступ до об’єкта jQuery як масив

$('#test1')[0].click(); // Works too!!!

9
$ ('selector') [0] .click () насправді буде обробляти щонайменше один випадок, що запускати обробник подій не буде: наявність браузера визнає його фактичним натисканням для запуску посилання обробника протоколу. Виклик тригера події клацання не призведе до запуску пов'язаної програми. Дякуємо, що включили її у свою відповідь!
Грег Петтіт

3
Так, .click()саме це мені було потрібно!
notacouch

3
$ ('# test2 span'). тригер ('клацання'); допомогло, оскільки він може відкрити URL-адресу на новій вкладці, але $ ('# test1') [0] .click (); було відкриття спливаючої атаки.
Шишир Арора

Коли я намагаюся обробити клацання на фоновому елементі: $ ('# titleee a'). Тригер ('click'); -> Не працює! $ ('# titleee a') [0] .click (); -> Працює!
18augst

1
$ ('# test1') [0] .click (); є рятівником. Велике спасибі
Аміт Біш

18

Оскільки це питання займає №1 в Google за те, що "викликає натискання на <a>елемент", і жодна відповідь насправді не згадує, як це зробити, ось як це зробити:

$('#titleee a')[0].click();

Пояснення: ви запускаєте a clickна базовому html-елементі, а не на jQuery-об'єкт .

Ласкаво просимо до googlers :)


2
"Ви викликаєте клацання на нижньому html-елементі, а не на jQuery-об'єкт." - це натиснуло на мене, дякую!
Фріш

5

З наданим вами кодом ви не можете очікувати, що щось станеться. Я другий @mashappslabs: спочатку додаю обробник подій:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

то запустіть вашу подію:

$("selector").click(); //or
$("selector").trigger("click");

і ви повинні побачити повідомлення на своїй консолі.


5
Для мене це не працює: якщо селектор "a" (тег HTML для посилань, просто щоб було зрозуміло), анонімна функція викликається, коли я дзвоню trigger, але дія тегу не відбувається. Це як подія не поширюється на пов'язаний елемент DOM. Відповідь @GrahamHotchkiss - єдина, яка надійно працює для мене.
Олівер

5

Якщо ви намагаєтеся викликати подію на якірі, то наявний код буде спрацьовувати.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

АБО

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

АБО

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});

3

Ну, спочатку потрібно налаштувати подію клацання, потім ви можете її запустити і подивитися, що станеться

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');

3

Це демонстрація того, як викликати подію

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>


2

Це не відповідає точно на ваше запитання, але ви отримаєте такий же результат при меншій кількості головного болю.

У мене завжди є методи виклику подій клацання, які містять всю логіку, яку я хотів би виконати. Так що я можу просто викликати метод безпосередньо, якщо хочу виконати дію без фактичного клацання.


2

Вам слід зателефонувати до власного .click()методу елемента або використатиcreateEvent API.

Для отримання додаткової інформації відвідайте: https://learn.jquery.com/events/triggering-event-handlers/


6
Ласкаво просимо до переповнення стека! Хоча це може бути цінним підказом для вирішення проблеми, хороша відповідь також демонструє рішення. Будь ласка редагувати надати приклад коду , щоб показати , що ви маєте в виду. Крім того, розгляньте, як написати це замість цього.
Toby Speight
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.