Как вызвать клик по ссылке с помощью jQuery

239

У меня есть ссылка:

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

jquery triggers click Patrioticcow
источник
7
location.href($('#titleee').find('a').attr("href"));?
Сильвен
3
или даже $ ('ul.gallery'). find ('li> a'). trigger ('click');
CarneyCode
114
Ребята. Настоящий ответ так прост. $('#titleee a')[0].click();, Другими словами, используйте метод щелчка DOM, а не jQuery. Upvote Грэм Хотчкисс !
Роман Старков
5
@romkyns нет, это не правильно, так как он открывает всплывающее окно вместо новой вкладки. но нажатие на фиктивный промежуток внутри этого тега «а» служит цели
Шишир Арора
1
Если вы пытаетесь вызвать событие на привязке, то ваш код будет работать. $('ul#titleee li a[href="#inline"]').click();
Ананд Пал

Ответы:

310

Если вы пытаетесь вызвать событие на якоре, то код , который вы должны будете работать , я воссоздал свой пример в 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 () - более быстрый селектор, чем тот, который вы предлагаете, сделайте тест, если вы не согласны, но ваше предложение замедляет его. положительно :-)
Ady Ngom
14
@mashappslabs - Все в порядке. Я рад за вас, если вы чувствуете необходимость делать преждевременные и микрооптимизации, независимо от того, насколько это верно. :)
Кит Сунде
5
@Kit ... поэтому, когда вы делаете заявление типа "не нужно вызывать find", оно не попадает в область преждевременной оптимизации ?? Я думаю, что это так, но это происходит медленнее, чем было предложено вначале. Я отвечаю не ради спора, а за согласованные усилия, чтобы улучшить то, что мы все любим делать. Я надеюсь, что это выходит правильно :-)
Ady Ngom
5
@mashappslabs - Когда я впервые увидел jsperf.com, я подумал, что вернусь и скажу, что вы правы, в общем случае ваш метод быстрее. Только Опера медленнее. jsperf.com/jquery-selector-perf-right-to-left/32
Кит Сунде,
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 () фактически обработает хотя бы один случай, который не будет вызывать обработчик события: браузер распознает его как фактический щелчок для запуска ссылки обработчика протокола. Триггер вызова по событию click не приведет к запуску соответствующего приложения. Спасибо, что включили это в свой ответ!
Грег Петтит
3
Да, .click()это именно то, что мне было нужно!
notacouch
3
$ ('# test2 span'). trigger ('click'); помогло, так как он может открыть URL в новой вкладке, но $ ('# test1') [0] .click (); открывал всплывающее окно.
Шишир Арора
Когда я пытаюсь обработать щелчок по элементу фона: $ ('# titleee a'). Trigger ('click'); -> Не работает! $ ('# titleee a') [0] .click (); -> Работает!
18
1
$ ( '# test1') [0] .click (); это спаситель Большое спасибо
Амит Бишт
18

Так как этот вопрос занимает первое место в Google за «инициирование клика по <a>элементу», и ни один ответ на самом деле не упоминает, как вы это делаете, вот как вы это делаете:

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

Объяснение: вы инициируете a clickдля базового html-элемента, а не для jQuery-объекта .

Пожалуйста, гуглеры :)

Alex
источник
2
«Вы запускаете щелчок по основному html-элементу, а не jQuery-объекту». - это щелкнуло для меня, спасибо!
Фриш
5

С предоставленным вами кодом вы не можете ожидать, что что-то произойдет. Я второй @mashappslabs: сначала добавить обработчик событий:

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

затем запустите ваше событие:

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

и вы должны увидеть сообщение в вашей консоли.

Julz
источник
5
Это не работает для меня: если селектор «а» (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

Итак, вы должны сначала настроить событие click, а затем запустить его и посмотреть, что произойдет:

//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>
Харшад Хирапара
источник
3

Для ссылок это должно работать:

eval($(selector).attr('href'));
Амин
источник
2

Это не совсем отвечает на ваш вопрос, но даст вам тот же результат с меньшей головной болью.

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

Мэтью Вайнс
источник
2

Вы должны вызвать собственный .click()метод элемента или использовать createEventAPI.

Для получения дополнительной информации, пожалуйста, посетите: https://learn.jquery.com/events/triggering-event-handlers/

Джордж Филиппакис
источник
6
Добро пожаловать в стек переполнения! Хотя это может быть ценным советом для решения проблемы, хороший ответ также демонстрирует решение. Пожалуйста, измените, чтобы предоставить пример кода, чтобы показать, что вы имеете в виду. В качестве альтернативы, попробуйте написать это как комментарий.
Тоби Спейт