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

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

143 голосов
/ 21 апреля 2009

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

Вот мой код: 

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

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

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

Ответы [ 17 ]

191 голосов
/ 12 мая 2012

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

$('a.mylink')[0].click()
122 голосов
/ 21 апреля 2009

Старайтесь не включать подобные вызовы в 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>

Edit:

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

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

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

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

Инструкция:

  • Создать элемент ссылки (<a href>)
  • Присвойте ссылке атрибут класса со значением Thickbox (class="thickbox")
  • В атрибуте href ссылки добавьте следующий якорь: #TB_inline

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

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

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

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

Я недавно нашел, как вызвать событие щелчка мыши через 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>
8 голосов
/ 07 февраля 2012

этот подход работает на 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) {}
6 голосов
/ 08 августа 2013

Хотя это очень старый вопрос, я нашел что-то более легкое для решения этой задачи. Это плагин 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

6 голосов
/ 21 апреля 2009

В заголовке вопроса написано «Как я могу имитировать щелчок якоря в 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>

Не проверено, этот настоящий скрипт, но я раньше использовал trigger и др., И они сработали '*. 1005 *

UPDATE
triggerHandler на самом деле не делает то, что хочет ОП. Я думаю, что 1421968 дает лучший ответ на этот вопрос.

5 голосов
/ 04 февраля 2010

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

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

4 голосов
/ 01 мая 2012

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

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

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

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

2 голосов
/ 12 апреля 2012

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

eval(document.getElementById('someid').href)
2 голосов
/ 21 апреля 2009

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

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

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

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

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

Edit:

Хорошо, я должен был попробовать это для себя, и для меня почти точно ваш код работал и в 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.

Страница:
...