Как я могу имитировать щелчок якоря через JQuery?

144

У меня проблема с фальсификацией щелчка якоря с помощью jQuery: почему моя папка появляется при первом нажатии на кнопку ввода, а не во второй или третий раз?

Вот мой код:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Он всегда работает, когда я нажимаю непосредственно на ссылку, но не, если я пытаюсь активировать Thickbox через кнопку ввода. Это в ФФ. Для Chrome это работает каждый раз. Есть намеки?

prinzdezibel
источник
1
Вы оставляете здесь код Нет кода, связанного с событием click для привязки, которую вы нам показали. Что делает этот код? Есть ли какой-либо другой код?
Мэтт
1
@Matt Если вы используете метод click без параметров, он больше не интерпретируется как привязка к событию, он фактически НАЖИМАЕТ (как если бы вы щелкнули мышью) элемент, к которому он привязан. В этом случае при щелчке по элементу ввода следует также щелкнуть по элементу с идентификатором ThickboxId.
KyleFarris,
3
@KyleFarris: событие click () не работает в Chrome или Safari, если только к элементу, к которому нужно щелкнуть, не прикреплено событие onclick, и все равно будет запускаться только эта часть, а не переходить к значению href. В приведенном выше случае он хочет, чтобы он перешел к свойству href тега A, как будто пользователь щелкнул ссылку.
Чувствительный

Ответы:

123

Старайтесь не включать подобные вызовы в jQuery. Поместите тег сценария в верхней части страницы для привязки к clickсобытию:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Редактировать:

Если вы пытаетесь смоделировать пользователя, физически нажимающего на ссылку, я не верю, что это возможно. Обходной путь должен был бы обновить clickсобытие кнопки, чтобы изменить window.locationв Javascript:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

Изменить 2:

Теперь, когда я понял, что Thickbox - это пользовательский виджет jQuery UI, я нашел инструкции здесь :

Инструкции:

  • Создать элемент ссылки ( <a href>)

  • Присвойте ссылке атрибут класса со значением Thickbox ( class="thickbox")

  • В hrefатрибуте ссылки добавьте следующий якорь:#TB_inline

  • В hrefатрибуте после #TB_inlineдобавления добавьте следующую строку запроса на привязку:

    ? Высота = 300 & ширина = 300 & inlineId = myOnPageContent

  • Измените значения высоты, ширины и inlineId в запросе соответствующим образом (inlineID - это значение идентификатора элемента, содержащего содержимое, которое вы хотите отобразить в ThickBox.

  • При желании вы можете добавить modal = true в строку запроса (например #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true), чтобы закрытие ThickBox потребовало вызова tb_remove()функции из ThickBox. Посмотрите пример скрытого модального содержимого, где вы должны нажать да или нет, чтобы закрыть ThickBox.

Джон Раш
источник
window.location в обработчике кликов не работает, так как тогда Thickbox не работает должным образом.
prinzdezibel
Во втором примере может быть целесообразно использовать .prop()вместо того, attr()чтобы получить разрешенный URL.
Кевин Бауэрсокс
Я удивлен, что это принятый ответ. Триггер щелчка будет работать только с собственным элементом DOM, а не с элементом-оболочкой jQuery. Это обсуждается @Stevanicus и комментариями, а также несколькими другими сообщениями SO. Ответ должен быть изменен на ответ Стеваника.
Оливер
@Schollii - не стесняйтесь редактировать его по своему усмотрению.
Джон Раш
3
Я имел в виду, что принятым ответом должен быть ответ @stevanicus
Оливер
194

Что сработало для меня:

$('a.mylink')[0].click()
Stevanicus
источник
1
, жертвует, что следующая часть является именем класса. # будет для идентификатора.
Стеваникус
3
Если это необходимо для ввода, то используйте focusвместо click:)
Andrius Naruševičius
Это работает и для меня, но почему это работает? Почему $ ('a.mylink') [0] .click () работает, а $ ('a.mylink'). Eq (0) .click () - нет?
ChrisC
4
[0]указывает на первый элемент массива - селектор возвращает 0 или более элементов при его выполнении. К сожалению, .click()здесь, похоже, не работает напрямую, так как, по-видимому, другие вызовы применяются к коллекциям элементов из селекторов последовательно во всей структуре.
cfeduke
8
Использование [0]или .get(0)то же самое. Они используют версию элемента DOM, а не версию jQuery. В .click()этом случае функция является не событием щелчка jQuery, а собственным.
Рэдли Сустер
19

Я недавно нашел, как вызвать событие щелчка мыши через jQuery.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>
Юре
источник
1
Я не думаю, что это работает в IE, по крайней мере, не 7 или 8, потому что в документе нет метода createEvent.
Джереми
Как говорит орел, это работает в браузерах webkit. Но обратите внимание, что вы на самом деле не используете здесь jQuery (кроме $ selection)
tokland
1
в этом отсутствует половина волшебства: stackoverflow.com/questions/1421584/…
daniloquio
9

Этот подход работает на Firefox, Chrome и IE. надеюсь, это поможет кому-то

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}
Дамиан
источник
Очень полезный и лучший вариант из-за перекрестной совместимости на мой взгляд. Мне не нравится оборачивать все в блоки try / catch, но я понимаю, что это делается для каскадных попыток для каждого браузера.
h0r53
8

Хотя это очень старый вопрос, я нашел что-то более легкое, чтобы справиться с этой задачей. Это плагин jquery, разработанный командой разработчиков jquery под названием simulate. Вы можете включить его после JQuery, а затем вы можете сделать что-то вроде

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

отлично работает в Chrome, Firefox, Opera и IE10. Вы можете скачать его с https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Руванка Мадхушан
источник
Ключевой особенностью simulate()является то, что он отправляет события jQuery, а также запускает собственное действие браузера. Это в настоящее время правильный ответ +1
Унесенные Coding
Работает как шарм, и это позволяет мне открывать страницу в новой вкладке, когда пользователь нажимает кнопку в моей сетке кендо.
Джон Салли
6

В заголовке вопроса написано «Как я могу имитировать щелчок якоря в jQuery?». Ну, вы можете использовать методы «trigger» или «triggerHandler», например так:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Не проверенный, этот настоящий сценарий, но я использовал triggeret al раньше, и они работали хорошо.

ОБНОВЛЕНИЕ
triggerHandler фактически не делает то, что хочет OP. Я думаю, что 1421968 дает лучший ответ на этот вопрос.

elo80ka
источник
5

Я бы посоветовал взглянуть на Selenium API, чтобы увидеть, как они вызывают щелчок по элементу в браузер-совместимом режиме:

Ищите BrowserBot.prototype.triggerMouseEventфункцию.

Себастьян РоккаСерра
источник
4

Я считаю, что вы можете использовать:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

Это легко вызовет функцию щелчка, фактически не нажимая на нее.

Дипак
источник
2

Вам нужно подделать щелчок якоря? С сайта Thickbox:

ThickBox может быть вызван из элемента ссылки, элемента ввода (обычно кнопки) и элемента области (карты изображений).

Если это приемлемо, это должно быть так же просто, как поместить класс Thickbox в сам ввод:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

Если нет, я бы порекомендовал использовать Firebug и поместить точку останова в метод onclick элемента привязки, чтобы посмотреть, сработает ли он только при первом щелчке.

Редактировать:

Ладно, я должен был попробовать это для себя, и для меня почти точно ваш код работал как в Chrome, так и в Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

Окно всплывает независимо от того, нажимаю ли я на вход или на элемент привязки. Если приведенный выше код работает для вас, я полагаю, что ваша ошибка лежит в другом месте, и вы пытаетесь изолировать проблему.

Другое, возможно, заключается в том, что мы используем разные версии jquery / Thickbox. Я использую то, что я получил со страницы Thickbox - JQuery 1.3.2 и Thickbox 3.1.

свиристель
источник
Да, мне нужно подделать его, и да, сам обработчик щелчков работает. Но на самом деле я не установил событие onclick вообще, и оно работает, но только в первый раз. Но и с onclick, обработанным в ThickboxId, это не будет работать.
prinzdezibel
Я имел в виду, чтобы убедиться, что щелчок в элементе привязки срабатывает каждый раз, когда вы нажимаете элемент ввода. О, и посмотрите мое редактирование выше.
Wingwing
2

Вы можете создать форму через jQuery или в коде HTML-страницы с действием, которое имитирует вашу ссылку href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();
Рус Миллер
источник
Этот метод приводит к перезагрузке всей страницы, а не просто к привязке. Кроме того, он также добавляет "?" на URL, чтобы страница стала example.com?#test вместо example.com # test . Проверено на Chrome и Safari.
Чувствительный
В FF это будет хорошо работать. В Webkit-браузерах вы получите URL, как описано в Senseful. Но это не проблема, не так ли?
sdepold
2

Чтобы имитировать щелчок на привязке при посадке на страницу, я просто использовал jQuery для анимации свойства scrollTop в поле « $(document).ready.Нет необходимости в сложном триггере», и это работает в IE 6 и любом другом браузере.

Julien
источник
2

Если вам не нужно использовать JQuery, как я не делаю. У меня были проблемы с кросс-браузерной функцией .click(). Поэтому я использую:

eval(document.getElementById('someid').href)
Craig
источник
Быстро и грязно, но у меня сработало. В jQuery это eval ($ ("# someid"). Attr ("href"));
mhenry1384
2

В Javascript вы можете сделать это

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

и вы можете использовать его как

submitRequest("target-element-id");
Яшпал Сингла
источник
1

Используя скрипт Jure, я сделал это, чтобы легко «кликнуть» столько элементов, сколько вы хотите.
Я просто использовал Google Reader для 1600+ элементов, и он работал отлично (в Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
fregante
источник
Я не думаю, что это работает в IE, по крайней мере, не 7 или 8, потому что в документе нет метода createEvent.
Джереми
Я считаю, что document.createEventObject () следует использовать в IE, но я не пробовал.
fregante
@ bfred.it: кажется, что createEventObjectв IE это больше для создания объекта события для передачи обработчикам, а не для отправки искусственного события. IE fireEventможет быть ближе dispatchEvent, но он будет вызывать только слушателей, а не действия браузера по умолчанию. Однако в IE вы можете просто вызвать clickметод.
theazureshadow
1

JQuery('#left').triggerHandler('click');отлично работает в Firefox и IE7. Я не проверял это в других браузерах.

Если вы хотите активировать автоматические клики, сделайте следующее:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
Singh
источник
1

Это не работает на родном браузере Android, чтобы нажать «скрытый элемент ввода (файл)»:

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

Но это работает:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
лошадь
источник
0

Пытаясь смоделировать «щелчок» в модульных тестах с помощью спиннера jQuery UI, я не смог заставить работать ни один из предыдущих ответов. В частности, я пытался смоделировать «вращение» выбора стрелки вниз. Я посмотрел на блочные тесты пользовательского интерфейса jQuery, и они используют следующий метод, который работал для меня:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
wbdarby
источник