Как я могу имитировать щелчок привязки через jquery?
Вопрос
У меня проблема с имитацией щелчка по якорю через jQuery:Почему мой толстый ящик появляется при первом нажатии на кнопку ввода, а не во второй или третий раз?
Вот мой код:
<input onclick="$('#thickboxId').click();" type="button" value="Click me" />
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
Это всегда работает, когда я нажимаю непосредственно на ссылку, но не если я пытаюсь активировать толстое поле с помощью кнопки ввода.Это в ФФ.Кажется, что для Chrome это работает каждый раз.Есть какие-нибудь подсказки?
Решение
Старайтесь избегать такого встраивания вызовов 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, я нашел инструкции здесь:
Инструкции:
- Создайте элемент ссылки (
<a href>
) - Присвойте ссылке атрибут класса со значением Thickbox (
class="thickbox"
) - в
href
атрибут ссылки добавьте следующий якорь:#TB_inline
в
href
атрибут после#TB_inline
добавьте к привязке следующую строку запроса:?height=300&width=300&inlineId=myOnPageContent
Измените значения высоты, ширины и inlineId в запросе соответствующим образом (inlineID — это значение идентификатора элемента, содержащего контент, который вы хотите отобразить в ThickBox.
- При желании вы можете добавить modal=true в строку запроса (например,
#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true
), так что закрытие ThickBox потребует вызоваtb_remove()
функция изнутри ThickBox.См. пример скрытого модального содержимого, где вы должны нажать «Да» или «Нет», чтобы закрыть ThickBox.
Другие советы
Что сработало для меня, так это:
$('a.mylink')[0].click()
Недавно я нашел, как вызвать событие щелчка мыши через 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>
этот подход работает в 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) {}
Хотя это очень старый вопрос, я нашел что-то более простое для решения этой задачи.Это плагин jquery, разработанный командой jquery UI под названием Simulation.вы можете включить его после 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
В заголовке вопроса говорится: «Как я могу имитировать щелчок привязки в 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
и другие раньше, и они работали хорошо.
ОБНОВЛЯТЬ
triggerHandler
на самом деле не делает то, что хочет ОП.Я думаю 1421968 дает лучший ответ на этот вопрос.
Я бы предложил взглянуть на Selenium API, чтобы увидеть, как они вызывают щелчок по элементу в совместимом с браузером виде:
Ищите BrowserBot.prototype.triggerMouseEvent
функция.
Я считаю, что вы можете использовать:
$('#yourLink').bind('click', function() {
//Do something over here
});
$('#yourLink').trigger('click');
Это легко активирует функцию щелчка, даже не нажимая на нее.
Вам нужно имитировать щелчок якоря?С толстого сайта:
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.Я использую то, что получил со страницы толстого ящика — jquery 1.3.2 и толстого ящика 3.1.
Вы можете создать форму с помощью jQuery или в коде HTML-страницы с действием, имитирующим ссылку на ссылку:
<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();
Чтобы имитировать щелчок по якорю при переходе на страницу, я просто использовал jQuery для анимации свойства ScrollTop в $(document).ready.
Нет необходимости в сложном триггере, и он работает в IE 6 и любом другом браузере.
Если вам не нужно использовать JQuery, как мне.У меня были проблемы с кроссбраузерной функцией .click()
.Поэтому я использую:
eval(document.getElementById('someid').href)
В 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");
Используя скрипт Юре, я сделал это, чтобы легко «щелкнуть» столько элементов, сколько захотите.
Я только что использовал Google Reader для более чем 1600 элементов, и он отлично работал (в Firefox)!
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
JQuery('#left').triggerHandler('click');
отлично работает в Firefox и IE7.На других браузерах не проверял.
Если вы хотите активировать автоматические клики пользователей, сделайте следующее:
window.setInterval(function()
{
$('#left').triggerHandler('click');
}, 1000);
Это не работает в собственном браузере Android, чтобы щелкнуть «скрытый элемент ввода (файла)»:
$('a#swaswararedirectlink')[0].click();
Но это работает:
$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
Пытаясь имитировать «щелчок» в модульных тестах с помощью счетчика пользовательского интерфейса jQuery, я не смог заставить работать ни один из предыдущих ответов.В частности, я пытался имитировать «вращение» выбора стрелки вниз.Я посмотрел на Модульные тесты счетчика jQuery UI и они используют следующий метод, который сработал у меня:
element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();