Як я можу імітувати клацання якоря за допомогою jquery?


144

У мене виникають проблеми з підробкою натискання на якір через jQuery: Чому моя товста скринька з’являється перший раз, коли я натискаю кнопку введення, але не другий чи третій раз?

Ось мій код:

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

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

Це завжди працює, коли я натискаю прямо на посилання, але ні, якщо я намагаюся активувати товсту панель за допомогою кнопки введення. Це у ФФ. Для Chrome це, здається, працює кожен раз. Якісь підказки?


1
Ви залишаєте тут код. Немає коду, пов’язаного з подією натискання на якір, який ви нам показали. Що робить цей код? Чи є ще якийсь код?
Метт

1
@Matt Якщо ви використовуєте метод click без параметрів, він більше не інтерпретується як прив'язка події, він фактично КЛІКУЄ (як би ви клацали мишкою) елемент, на який його прикували. У цьому випадку при натисканні на вхідний елемент слід також натиснути елемент з ідентифікатором 'thickboxId'.
КайлФарріс

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, я знайшов тут інструкції :

Інструкції:

  • Створіть елемент посилання ( <a href>)

  • Надайте посилання атрибут класу зі значенням thickbox ( class="thickbox")

  • В hrefатрибут посилання додайте наступний якір:#TB_inline

  • В hrefатрибуті після #TB_inlineдодавання наступного рядка запиту на якір:

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

  • Відповідно змініть значення висоти, ширини та inlineId у запиті (inlineID - це ідентифікаційне значення елемента, що містить вміст, який ви хочете показати у ThickBox.

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


window.location в обробці кліків не працює, оскільки тоді товста скринька не працює, як очікувалося.
prinzdezibel

У другому прикладі може бути доцільним використовувати .prop()замість того, attr()щоб отримати розв’язаний URL.
Кевін Бауерсокс

Я здивований, що це прийнята відповідь. Тригер натискання працюватиме лише на нативному елементі DOM, а не на елементі оболонки jQuery. Про це йдеться в коментарях @Stevanicus та коментарях, а також у кількох інших публікаціях, присвячених ТА Відповідь слід змінити на відповідь Стеваніка.
Олівер

@Schollii - сміливо відредагуйте його до потрібної правильності.
Джон Раш

3
Я мав на увазі, що прийнятою відповіддю має бути відповідь @stevanicus
Олівер

194

Що для мене працювало:

$('a.mylink')[0].click()

1
. дарує, що наступна частина - це назва класу. # буде для ідентифікатора.
Стеванік

3
Якщо він потрібен для введення даних, тоді використовуйте focusзамість click:)
Андрій Нарушевічус

Це працює і для мене, але чому це працює? Чому $ ('a.mylink') [0] .click () працює, але $ ('a.mylink'). Eq (0) .click () не працює?
ChrisC

4
[0]вказує на перший елемент масиву - селектор повертає 0 або більше елементів при його виконанні. Прикро, що .click(), здається, не працює тут безпосередньо, оскільки, здавалося б, інші виклики застосовуються до колекцій елементів від селекторів послідовно в рамках.
cfeduke

8
Використовують [0]або .get(0)однаково. Вони використовують версію елемента DOM замість версії jQuery. .click()Функція в даному випадку не є подією Jquery клацання, але рідним.
Radley Sustaire

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.
Джеремі

Як каже орел, це працює у веб-браузерах. Але зауважте, що ви насправді не використовуєте 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?". Ну, ви можете використовувати "тригер" або "тригерHandler" методи, наприклад:

<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 дає найкращу відповідь на це питання.


5

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

Шукайте BrowserBot.prototype.triggerMouseEventфункцію.


4

Я вважаю, що ви можете використовувати:

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

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

Це легко запустить функцію клацання, не фактично натискаючи на неї.


2

Чи потрібно підробляти натискання на якір? З веб-сайту товстої скриньки:

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 та thickbox 3.1.


Так, мені потрібно підробити це, і так сам обробник кліків працює. Але насправді я взагалі не встановив подію onclick, і вона працює, але лише в перший раз. Але також з onclick, який обробляється у thickboxId, він не працюватиме.
prinzdezibel

Я мав на увазі перевірити, що onclick в елементі якоря спрацьовує кожен раз, коли ви клацаєте на вхідному елементі. О, і дивіться мою редакцію вище.
оксамитування воска

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.
Чуйний

У ФФ це буде добре працювати. У веб-браузерах ви отримаєте URL-адреси, як описано Senseful. Але це не проблема, чи не так?
sdepold

2

Щоб імітувати клацання якоря під час посадки на сторінку, я просто використав jQuery, щоб анімувати властивість scrollTop, $(document).ready.не потребуючи складного тригера, і це працює на IE 6 та будь-який інший браузер.


2

Якщо вам не потрібно використовувати JQuery, як і я. У мене були проблеми з функцією крос-браузера .click(). Тому я використовую:

eval(document.getElementById('someid').href)

Швидкий і брудний, але працював на мене. У 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

Використовуючи сценарій Юра, я зробив це, щоб легко "натиснути" стільки елементів, скільки вам потрібно.
Я просто використовував його Google Reader на 1600+ предметах, і він відмінно працював (у Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

Я не думаю, що це працює в IE, принаймні, не 7 або 8, тому що на документах не існує методу createEvent.
Джеремі

Я вважаю, що document.createEventObject () слід використовувати замість IE, але я цього не намагався.
fregante

@ bfred.it: Схоже, createEventObjectв IE це скоріше для створення об'єкта події для передачі обробникам, а не для розсилки синтетичної події. IE fireEventможе бути ближче до dispatchEvent, але це спричинить лише слухачів - не дії браузера за замовчуванням. Однак в IE ви можете просто викликати clickметод.
theazures тінь

1

JQuery('#left').triggerHandler('click');прекрасно працює у Firefox та IE7. Я не перевіряв його в інших браузерах.

Якщо ви хочете викликати автоматичні кліки користувача, виконайте наступне:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

1

Це не працює, щоб натиснути "прихований вхідний файл (файл)":

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

Але це працює:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

0

Намагаючись імітувати «клік» в одиничних тестах за допомогою спінера jQuery UI, я не зміг отримати жодного з попередніх відповідей. Зокрема, я намагався імітувати «віджимання» вибору стрілки вниз. Я переглянув тести спінерного блоку jQuery UI, і вони використовують наступний метод, який працював на мене:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.