Как я могу имитировать щелчок якоря через 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 это, кажется, работает каждый раз. Какие-нибудь намеки?

919   17  

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) так что закрытие Толстого ящика потребует вызова

то, что сработало для меня было:

$('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?". Ну, вы можете использовать методы "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 et 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

    Ничего не найдено.