Как я могу имитировать щелчок якоря через jquery?
У меня проблема с подделкой щелчка якоря через jQuery:
Почему мой thickbox появляется при первом нажатии на кнопку ввода, но не во второй или третий раз?
вот мой код:
<input onclick="$('#thickboxId').click();" type="button" value="Click me" />
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
Он всегда работает, когда я нажимаю непосредственно на ссылку, но не тогда, когда я пытаюсь активировать thickbox с помощью кнопки ввода. Это в FF. Для Chrome это, кажется, работает каждый раз. Какие-нибудь намеки?
17 ответов:
старайтесь избегать такой вставки вызовов 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>Edit 2:
теперь, когда я поймите, что Thickbox-это пользовательский виджет jQuery UI, я нашел инструкции здесь:
инструкции:
- создать элемент link (
<a href>)- дайте ссылке атрибут класса со значением thickbox (
class="thickbox")- на
hrefатрибут ссылки добавить следующий якорь:#TB_inlineна после
#TB_inlineдобавьте следующую строку запроса к якорь:?высота=300 & ширина=300&inlineId=myOnPageContent
измените значения height, width и inlineId в запросе соответственно (inlineID-это значение идентификатора элемента, содержащего содержимое, которое вы хотели бы показать в ThickBox.
- дополнительно вы можете добавить modal=true в строку запроса (например,
#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) так что закрытие Толстого ящика потребует вызова
Я недавно нашел, как вызвать событие щелчка мыши через 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?". Ну, вы можете использовать методы "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на самом деле не делает то, что хочет ОП. Я думаю 1421968 обеспечивает лучший ответ на этот вопрос.
Я бы предложил посмотреть на Selenium API, чтобы увидеть, как они вызывают щелчок по элементу в браузере совместимым образом:
искать .
хотя это очень старый вопрос, я нашел что-то легче справиться с этой задачей. Это плагин jquery, разработанный командой jQuery UI под названием 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
Я считаю, что вы можете использовать:
$('#yourLink').bind('click', function() { //Do something over here }); $('#yourLink').trigger('click');Это легко вызовет функцию щелчка, не нажимая на нее.
вам нужно подделать щелчок якоря? С сайта thickbox:
ThickBox может быть вызван из элемента link, элемента ввода (обычно кнопки) и элемента area (карты изображений).
Если это приемлемо, это должно быть так же просто, как поместить класс 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.
Вы можете создать форму с помощью 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();
чтобы имитировать щелчок по якорю при посадке на страницу, Я просто использовал 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");
используя скрипт Jure я сделал это, чтобы легко "щелкнуть" столько элементов, сколько вы хотите.
Я просто использовал его 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 UI spinner я не смог получить ни одного из предыдущих ответов на работу. В частности, я пытался имитировать "спин" выбора стрелки вниз. Я посмотрел на модульные тесты jQuery UI spinner и они используют следующий метод, который работал для меня:
element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
Comments