Jak zasymulować kliknięcie kotwicy za pomocą jQuery?

144

Mam problem z fałszowaniem kliknięcia kotwicy przez jQuery: Dlaczego mój gruby boks pojawia się po pierwszym kliknięciu przycisku wejściowego, a nie za drugim lub trzecim?

Oto mój kod:

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

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

Działa zawsze, gdy klikam bezpośrednio w link, ale nie, jeśli próbuję aktywować grube okno za pomocą przycisku wprowadzania. To jest w FF. W przypadku Chrome wydaje się, że działa za każdym razem. Jakieś wskazówki?

prinzdezibel
źródło
1
Zostawiasz tutaj kod. Nie ma kodu powiązanego ze zdarzeniem kliknięcia kotwicy, którą nam pokazałeś. Co robi ten kod? Czy jest potrzebny inny kod?
Matt
1
@Matt Jeśli używasz metody click bez parametrów, nie jest ona już interpretowana jako powiązanie zdarzenia, w rzeczywistości KLIKNIJ (tak jakbyś miał kliknąć myszą) element, do którego jest połączony. W tym przypadku po kliknięciu elementu wejściowego należy również kliknąć element o identyfikatorze „thickboxId”.
KyleFarris
3
@KyleFarris: Zdarzenie click () nie działa w przeglądarce Chrome ani Safari, chyba że klikany element ma dołączone zdarzenie onclick i nadal wyzwala tylko tę część, a nie przechodzi do wartości href. W powyższym przypadku chce, aby przechodziła do właściwości href tagu A, tak jakby użytkownik kliknął łącze.
Senseful

Odpowiedzi:

123

Staraj się unikać wstawiania wywołań jQuery w ten sposób. Umieść tag skryptu u góry strony, aby powiązać ze clickzdarzeniem:

<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>

Edytować:

Jeśli próbujesz zasymulować użytkownika fizycznego klikającego łącze, to nie sądzę, aby było to możliwe. Rozwiązaniem byłoby zaktualizowanie clickzdarzenia przycisku, aby zmienić window.locationkod JavaScript:

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

Edycja 2:

Teraz, gdy zdałem sobie sprawę, że Thickbox to niestandardowy widżet interfejsu użytkownika jQuery, instrukcje znalazłem tutaj :

Instrukcje:

  • Utwórz element odsyłacza ( <a href>)

  • Nadaj linkowi atrybut klasy o wartości Thickbox ( class="thickbox")

  • W hrefatrybucie linku dodaj następującą kotwicę:#TB_inline

  • W hrefatrybucie po #TB_inlinedodaniu następującego ciągu zapytania do kotwicy:

    ? height = 300 & width = 300 & inlineId = myOnPageContent

  • Zmień odpowiednio wartości height, width i inlineId w zapytaniu (inlineID to wartość identyfikatora elementu zawierającego treść, którą chcesz wyświetlić w ThickBox.

  • Opcjonalnie możesz dodać modal = true do ciągu zapytania (np. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true), Aby zamknięcie ThickBox wymagało wywołania tb_remove()funkcji z poziomu ThickBox. Zobacz przykład ukrytej zawartości modalnej, w którym należy kliknąć tak lub nie, aby zamknąć ThickBox.

John Rasch
źródło
window.location w module obsługi kliknięcia nie działa, ponieważ wtedy gruby box nie działa zgodnie z oczekiwaniami.
prinzdezibel
W drugim przykładzie może być wskazane użycie .prop()zamiast attr()uzyskania rozstrzygniętego adresu URL.
Kevin Bowersox
Dziwię się, że to zaakceptowana odpowiedź. Czynnik uruchamiający kliknięcie będzie działać tylko na natywnym elemencie DOM, a nie na elemencie opakowania jQuery. Jest to omawiane przez @Stevanicus i komentarze oraz w kilku innych postach SO. Odpowiedź należy zmienić na odpowiedź Stevanicusa.
Oliver
@Schollii - nie krępuj się, edytuj go do żądanej poprawności.
John Rasch
3
Chodziło mi o to, że akceptowaną odpowiedzią powinien być @stevanicus
Oliver
194

U mnie zadziałało:

$('a.mylink')[0].click()
Stevanicus
źródło
1
. przekazuje, że następna część to nazwa klasy. # oznaczałoby identyfikator.
Stevanicus
3
Jeśli jest to potrzebne do wprowadzenia, użyj focuszamiast click:)
Andrius Naruševičius
U mnie to również działa, ale dlaczego to działa? Dlaczego $ ('a.mylink') [0] .click () działa, ale $ ('a.mylink'). Eq (0) .click () nie działa?
ChrisC,
4
[0]wskazuje pierwszy element tablicy - selektor zwraca 0 lub więcej elementów po wykonaniu. To niefortunne, że .click()nie wydaje się działać bezpośrednio w tym miejscu, ponieważ pozornie inne wywołania są stosowane do kolekcji elementów z selektorów konsekwentnie w całej strukturze.
cfeduke
8
Używanie [0]lub .get(0)są takie same. Używają one wersji DOM elementu zamiast wersji jQuery. .click()Funkcja w tym przypadku nie jest zdarzenie click jQuery, ale rodzimy jeden.
Radley Sustaire
19

Niedawno odkryłem, jak wyzwalać zdarzenie kliknięcia myszą za pośrednictwem 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>
Jure
źródło
1
Nie sądzę, żeby to działało w IE, a przynajmniej nie w 7 lub 8, ponieważ w dokumencie nie ma metody createEvent.
Jeremy
Jak mówi eagle, działa to w przeglądarkach webkit. Ale pamiętaj, że tak naprawdę nie używasz tutaj jQuery (poza wyborem $)
tokland,
1
to brakuje połowy magii: stackoverflow.com/questions/1421584/ ...
daniloquio
9

to podejście działa w przeglądarkach Firefox, Chrome i IE. mam nadzieję, że to komuś pomoże:

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) {}
damian
źródło
Moim zdaniem bardzo pomocna i lepsza opcja ze względu na kompatybilność krzyżową. Nie lubię zawijać wszystkiego blokami try / catch, ale rozumiem, że dzieje się tak w celu kaskadowania prób dla każdej przeglądarki.
h0r53
8

Chociaż jest to bardzo stare pytanie, znalazłem coś łatwiejszego do wykonania tego zadania. Jest to wtyczka jquery stworzona przez zespół jquery UI o nazwie simulate. możesz dołączyć go po jquery, a następnie możesz zrobić coś takiego

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

działa dobrze w chrome, firefox, opera i IE10. możesz go pobrać z https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Ruwanka Madhushan
źródło
Kluczową cechą programu simulate()jest to, że wysyła zdarzenia jQuery, a także wyzwala natywną akcję przeglądarki. To jest teraz poprawna odpowiedź +1
Gone Coding
Działa jak urok i pozwala mi otworzyć stronę w nowej karcie, gdy użytkownik kliknie przycisk w mojej siatce kendo.
John Sully,
6

Tytuł pytania brzmi „Jak zasymulować kliknięcie kotwicy w jQuery?”. Możesz użyć metod „trigger” lub „triggerHandler”, na przykład:

<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>

Nie testowane, to rzeczywisty skrypt, ale użyłem triggeri wsp. Wcześniej i działały dobrze.

UPDATE w
triggerHandler rzeczywistości nie robi tego, czego chce OP. Myślę, że 1421968 dostarcza najlepszej odpowiedzi na to pytanie.

elo80ka
źródło
5

Proponuję przyjrzeć się API Selenium, aby zobaczyć, jak wywołują kliknięcie elementu w sposób zgodny z przeglądarką:

Poszukaj BrowserBot.prototype.triggerMouseEventfunkcji.

Sébastien RoccaSerra
źródło
4

Uważam, że możesz użyć:

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

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

Spowoduje to łatwe uruchomienie funkcji klikania, bez faktycznego klikania go.

Deepak
źródło
2

Czy musisz sfałszować kliknięcie kotwicy? Z witryny Thickbox:

ThickBox można wywołać z elementu łącza, elementu wejściowego (zwykle przycisku) i elementu obszaru (mapy obrazów).

Jeśli to jest do zaakceptowania, powinno być tak proste, jak umieszczenie klasy grubego pudełka na samym wejściu:

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

Jeśli nie, polecam użycie Firebuga i umieszczenie punktu przerwania w metodzie onclick elementu kotwicy, aby sprawdzić, czy jest uruchamiany tylko przy pierwszym kliknięciu.

Edytować:

Okay, musiałem to wypróbować i dla mnie prawie dokładnie twój kod działał zarówno w Chrome, jak i 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>

Okno wyskakuje bez względu na to, czy kliknę element wejściowy, czy zakotwiczony. Jeśli powyższy kod działa dla Ciebie, sugeruję, że błąd leży gdzie indziej i spróbuj wyizolować problem.

Inną możliwością jest to, że używamy różnych wersji jquery / thickbox. Używam tego, co dostałem ze strony Thickbox - jQuery 1.3.2 i thickbox 3.1.

jemiołuszka
źródło
Tak, muszę to sfałszować i tak, sam program obsługi kliknięć działa. Ale tak naprawdę w ogóle nie ustawiłem zdarzenia onclick i działa, ale tylko za pierwszym razem. Ale także z onclick obsługiwanym w thickboxId to nie zadziała.
prinzdezibel
Chodziło mi o sprawdzenie, czy onclick w elemencie kotwicy jest uruchamiany za każdym razem, gdy klikniesz element wejściowy. Aha, i zobacz moją edycję powyżej.
jemiołuszka
2

Możesz utworzyć formularz za pomocą jQuery lub w kodzie strony HTML z akcją, która naśladuje twój odnośnik 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();
Rus Miller
źródło
Ta metoda powoduje ponowne załadowanie całej strony, zamiast po prostu przeskoczyć do zakotwiczenia. Dodatkowo dodaje również znak „?” do adresu URL, aby strona stała się example.com?#test zamiast example.com # test . Przetestowano w Chrome i Safari.
Rozważna
W FF to będzie ładnie działać. W przeglądarkach Webkit otrzymasz adresy URL opisane w Senseful. Ale to nie jest problem, prawda?
złożono
2

Aby zasymulować kliknięcie kotwicy podczas lądowania na stronie, po prostu użyłem jQuery do animacji właściwości scrollTop w $(document).ready.Nie ma potrzeby stosowania złożonego wyzwalacza i działa to w IE 6 i każdej innej przeglądarce.

Julien
źródło
2

Jeśli nie musisz używać JQuery, tak jak ja nie. Miałem problemy z działaniem w różnych przeglądarkach .click(). Więc używam:

eval(document.getElementById('someid').href)
Craig
źródło
Szybki i brudny, ale działał dla mnie. W jQuery jest to eval ($ ("# someid"). Attr ("href"));
mhenry1384
2

W Javascript możesz to zrobić

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();
    }
}

i możesz go używać jak

submitRequest("target-element-id");
Yashpal Singla
źródło
1

Używając skryptu Jure'a, zrobiłem to, aby łatwo „klikać” tyle elementów, ile chcesz.
Właśnie użyłem go Czytnik Google na ponad 1600 pozycjach i działał idealnie (w przeglądarce Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
fregante
źródło
Nie sądzę, żeby to działało w IE, a przynajmniej nie w 7 lub 8, ponieważ w dokumencie nie ma metody createEvent.
Jeremy
Uważam, że document.createEventObject () powinno być używane w IE zamiast tego, ale nie próbowałem tego.
fregante
@ bfred.it: Wygląda na to, że createEventObjectw IE jest bardziej tworzenie obiektu zdarzenia do przekazania do modułów obsługi, niż wywoływanie zdarzenia syntetycznego. IE fireEventmoże być bliżej dispatchEvent, ale będzie wyzwalać tylko słuchacze - nie domyślne działania przeglądarki. Jednak w IE możesz po prostu wywołać clickmetodę.
theazureshadow
1

JQuery('#left').triggerHandler('click');działa dobrze w Firefoksie i IE7. Nie testowałem tego na innych przeglądarkach.

Jeśli chcesz uruchamiać automatyczne kliknięcia użytkowników, wykonaj następujące czynności:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
Singh
źródło
1

To nie działa w natywnej przeglądarce Androida, aby kliknąć „ukryty element wejściowy (plik)”:

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

Ale to działa:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
koń
źródło
0

Próbując zasymulować „kliknięcie” w testach jednostkowych za pomocą pokrętła jQuery UI, nie udało mi się uzyskać żadnej z poprzednich odpowiedzi. W szczególności próbowałem zasymulować „obrót” po wybraniu strzałki w dół. Spojrzałem na testy jednostkowe jQuery UI spinner i używają następującej metody, która zadziałała dla mnie:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
wbdarby
źródło