Как вызвать клик по ссылке с помощью 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

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

— Тоби Спейт