it-swarm.com.de

Kann ich jquery click () aufrufen, um einem <a> -Link zu folgen, wenn ich noch keinen Ereignishandler mit bind oder click daran gebunden habe?

Ich habe einen Timer in meinem JavaScript, der das Klicken auf einen Link emulieren muss, um nach Ablauf der Zeit zu einer anderen Seite zu gelangen. Dazu benutze ich die Funktion click() von jQuery. Ich habe auch $().trigger() und window.location Verwendet, und ich kann dafür sorgen, dass es bei allen dreien wie vorgesehen funktioniert.

Ich habe mit click() ein seltsames Verhalten beobachtet und versuche zu verstehen, was passiert und warum.

Ich benutze Firefox für alles, was ich in dieser Frage beschreibe, aber ich bin auch daran interessiert, was andere Browser damit machen.

Wenn ich zum Festlegen eines Ereignishandlers nicht $('a').bind('click',fn) oder $('a').click(fn) verwendet habe, scheint der Aufruf von $('a').click() überhaupt nichts zu bewirken. Der Standardhandler des Browsers für dieses Ereignis wird nicht aufgerufen, da der Browser die neue Seite nicht lädt.

Wenn ich jedoch zuerst einen Ereignishandler festgelegt habe, funktioniert er wie erwartet, auch wenn der Ereignishandler nichts unternimmt.

$('a').click(function(){return true;}).click();

Dadurch wird die neue Seite geladen, als hätte ich das a selbst angeklickt.

Meine Frage ist also zweifach: Ist das seltsames Verhalten, weil ich irgendwo etwas falsch mache? und warum macht der Aufruf von click() nichts mit dem Standardverhalten, wenn ich keinen eigenen Handler erstellt habe?

EDIT:

Wie Hoffman beim Versuch, meine Ergebnisse zu duplizieren, feststellte, passiert das oben beschriebene Ergebnis nicht wirklich. Ich bin nicht sicher, was die Ereignisse verursacht hat, die ich gestern beobachtet habe, aber ich bin mir heute sicher, dass es nicht das war, was ich in der Frage beschrieben habe.

Die Antwort ist also, dass Sie keine "falschen" Klicks im Browser machen können und dass jQuery nur Ihren Event-Handler aufruft. Sie können weiterhin window.location Verwenden, um die Seite zu wechseln, und das funktioniert bei mir einwandfrei.

174
Mnebuerquo

Interessant, dies ist wahrscheinlich eine "Feature-Anfrage" (dh ein Fehler) für jQuery. Das jQuery-Klickereignis löst die Klickaktion (OnClick-Ereignis im DOM genannt) für das Element nur aus, wenn Sie ein jQuery-Ereignis an das Element binden. Sie sollten zu jQuery-Mailinglisten ( http://forum.jquery.com/ ) gehen und dies melden. Dies könnte das gewünschte Verhalten sein, aber ich denke nicht.

BEARBEITEN:

Ich habe einige Tests durchgeführt, und was Sie gesagt haben, ist falsch, auch wenn Sie eine Funktion an ein 'a'-Tag binden, führt Sie dies nicht zu der durch das href-Attribut angegebenen Website. Versuchen Sie den folgenden Code:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   /* Try to dis-comment this:
   $('#a').click(function () {
    alert('jQuery.click()');
    return true;
   });
   */
  });
  function button_onClick() {
   $('#a').click();
  }
  function a_onClick() {
   alert('a_onClick');
  }
 </script>

</head>
<body>
 <input type="button" onclick="button_onClick()">
 <br>
 <a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html> 

Es wird niemals zu google.com weitergeleitet, es sei denn, Sie klicken direkt auf den Link (mit oder ohne den kommentierten Code). Beachten Sie auch, dass das Klickereignis, selbst wenn Sie es an den Link binden, nach dem Klicken auf die Schaltfläche nicht lila wird. Es wird nur lila, wenn Sie direkt auf den Link klicken.

Ich habe ein paar Nachforschungen angestellt und es scheint, dass der .click nicht mit "a" -Tags funktionieren soll, da der Browser kein "Fake Click" mit Javascript unterstützt. Ich meine, man kann mit Javascript kein Element "anklicken". Mit "a" -Tags können Sie das Ereignis onClick auslösen, der Link ändert jedoch nicht die Farben (in den meisten Browsern ist die Standardfarbe lila). Daher wäre es nicht sinnvoll, das $ (). Click -Ereignis mit 'a'-Tags zu versehen, da das Aufrufen des href-Attributs nicht Teil des onClick -Ereignisses ist, sondern im Browser fest codiert ist.

88
Hoffmann

Eine andere Möglichkeit ist natürlich, einfach Vanilla Javascript zu verwenden:

document.getElementById("a_link").click()
239
Peter

Wenn Sie sich den Code für das $.click Funktion Ich wette, es gibt eine bedingte Anweisung, die prüft, ob für das Element Listener für das Ereignis click registriert sind, bevor es fortgesetzt wird. Warum nicht einfach das href Attribut aus dem Link holen und die Seitenposition manuell ändern?

 window.location.href = $('a').attr('href');

BEARBEITEN: Hier ist, warum es nicht durch die Funktion trigger, jQuery-Quelle für Version 1.3.2 klickt:

 // Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
    if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
        event.result = false;

    // Trigger the native events (except for clicks on links)
    if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
        this.triggered = true;
        try {
            elem[ type ]();
        // prevent IE from throwing an error for some hidden elements
        } catch (e) {}
    }

Nach dem Aufruf von Handlern (sofern vorhanden) löst jQuery ein Ereignis für das Objekt aus. Es werden jedoch nur native Handler für Klickereignisse aufgerufen, wenn das Element kein Link ist. Ich glaube, das wurde aus irgendeinem Grund mit Absicht gemacht. Dies sollte jedoch zutreffen, unabhängig davon, ob ein Ereignishandler definiert ist oder nicht. Daher bin ich mir nicht sicher, warum das Anhängen eines Ereignishandlers in Ihrem Fall dazu führte, dass der native onClick -Handler aufgerufen wurde. Sie müssen tun, was ich getan habe, und durch die Ausführung gehen, um zu sehen, wo sie aufgerufen wird.

63
Ryan Lynch

Click-Handler für Ankertags sind ein Sonderfall in jQuery.

Ich denke, Sie könnten zwischen dem Onclick-Ereignis des Ankers (das dem Browser bekannt ist) und dem Click-Ereignis des jQuery-Objekts verwechselt werden, das den DOM-Begriff des Ankertags umschließt.

Sie können die jQuery 1.3.2-Quelle herunterladen hier .

Die relevanten Abschnitte der Quelle sind die Zeilen 2643-2645 (ich habe dies in mehrere Zeilen aufgeteilt, um das Verständnis zu erleichtern):

// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
     (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && 
       elem["on"+type] && 
       elem["on"+type].apply( elem, data ) === false
   )
     event.result = false;
5
marshally

Lösen Sie ein Hyperlink-Element aus, das sich in dem Element befindet, an das Sie die jquery .click () anhängen möchten.

<div class="TopicControl">
    <div class="articleImage">
       <a href=""><img src="" alt=""></a>
    </div>
</div>

In Ihrem Skript verbinden Sie sich mit dem Hauptcontainer, auf den Sie das Click-Ereignis anwenden möchten. Anschließend verwenden Sie die Standard-JQuery-Methode, um das Element (Typ, Klasse, ID) zu finden und den Klick auszulösen. Was passiert, ist, dass jquery eine rekursive Funktion eingibt, um den Klick auszulösen, und Sie die rekursive Funktion unterbrechen, indem Sie die Funktion 'e' und stopPropagation () übernehmen und false zurückgeben, weil jquery nichts anderes tun soll, als den Link auszulösen.

$('.TopicControl').click(function (event) {
         $(this).find('a').click();
        event.stopPropagation();
        return false;
     });

Eine alternative Lösung besteht darin, die Behälter in das Element zu wickeln und stattdessen als Behälter hinein zu stellen. Stellen Sie die Bereiche so ein, dass der Anzeigeblock den W3C-Standards entspricht.

3
Paul Styles

JS/jQuery unterstützt nicht das Standardverhalten von Links, auf die programmgesteuert "geklickt" wird.

Sie können ein Formular erstellen und abschicken. Auf diese Weise müssen Sie weder window.location Noch window.open Verwenden, die von Browsern häufig als unerwünschte Popups blockiert werden.

Dieses Skript hat 2 verschiedene Methoden: Eine, die versucht, 3 neue Tabs/Fenster zu öffnen (es öffnet nur 1 in IE und Chrome, weitere Informationen unten)) und eine, die ein benutzerdefiniertes Ereignis beim Klicken auf einen Link auslöst .

Hier ist, wie:

HTML

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <button id="testbtn">Test</button><br><br>

    <a href="https://google.nl">GOOGLE</a><br>
    <a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
    <a href="https://stackoverflow.com/">SO</a>
</body>
</html>

jQuery (script.js)

$(function()
{ 
    // Try to open all 3 links by pressing the button
    // - Firefox opens all 3 links
    // - Chrome only opens 1 of them without popup warning
    // - IE only opens 1 of them WITH popup warning
    $("#testbtn").on("click", function()
    {
        $("a").each(function()
        {
            var form = $("<form></form>");
            form.attr(
            {
                id     : "formform",
                action : $(this).attr("href"),
                method : "GET",
                // Open in new window/tab
                target : "_blank"
            });

            $("body").append(form);
            $("#formform").submit();
            $("#formform").remove();
        });
    });

    // Or click the link and fire a custom event 
    // (open your own window without following the link itself)
    $("a").on("click", function()
    {
        var form = $("<form></form>");
        form.attr(
        {
            id     : "formform",
            // The location given in the link itself
            action : $(this).attr("href"), 
            method : "GET",
            // Open in new window/tab
            target : "_blank"              
        });

        $("body").append(form);
        $("#formform").submit();
        $("#formform").remove();

        // Prevent the link from opening normally
        return false;
    });

});

Was es tut, ist für jedes Linkelement:

  1. Erstellen Sie ein Formular
  2. Gib es Attribute
  3. Hängen Sie es an das DOM an, damit es übermittelt werden kann
  4. Senden Sie es
  5. Entferne das Formular aus dem DOM und entferne alle Spuren.

Jetzt haben Sie einen neuen Tab/ein neues Fenster zum Laden von "https://google.nl" (Oder eine beliebige URL, ersetzen Sie sie einfach). Leider erhalten Sie beim Versuch, mehr als ein Fenster auf diese Weise zu öffnen, eine Popup blocked - Meldungsleiste, wenn Sie versuchen, das zweite zu öffnen (das erste Fenster ist noch geöffnet).


Weitere Informationen dazu, wie ich zu dieser Methode gekommen bin, finden Sie hier:

Öffnen eines neuen Fensters/einer neuen Registerkarte ohne Verwendung von window.open Oder window.location.href

3
Richard de Wit

Wenn Sie diese Funktion für einen Fall oder sehr wenige Kassetten benötigen. (Ihre gesamte App benötigt diese Funktion nicht.) Ich möchte jQuery lieber so lassen, wie es ist (aus vielen Gründen, einschließlich der Möglichkeit, auf neuere Versionen, CDN usw. zu aktualisieren) und habe die folgende Problemumgehung:

// For modren Browsers
$(ele).trigger("click");

// Relaying on Paul Irish's conditional class names http://bit.ly/HWIpAp (via HTML5 Boilerplate http://bit.ly/HUzi3I) where each IE version gets a class of its Version
$("html.ie7").length && (function(){
    var eleOnClickattr = $(ele).attr("onclick") 
    eval(eleOnClickattr);
  })()
2
adardesign

Es tut nichts, weil keine Ereignisse an das Ereignis gebunden wurden. Wenn ich mich richtig erinnere, verwaltet jQuery eine eigene Liste von Ereignishandlern, die aus Leistungs- und anderen Gründen an NodeLists gebunden sind.

2
JasonWyatt

Verwenden Sie zum Öffnen eines Hyperlinks auf derselben Registerkarte Folgendes:

$(document).on('click', "a.classname", function() {
    var form = $("<form></form>");
    form.attr(
    {
        id     : "formid",
        action : $(this).attr("href"),
        method : "GET",
    });

    $("body").append(form);
    $("#formid").submit();
    $("#formid").remove();
    return false;
});
1

Mit jQuery können Sie das jQuery-Objekt für dieses Element auswählen. Rufen Sie dann das zugrunde liegende DOM-Element ab und rufen Sie dessen click() -Methode auf.

von id

$("#my-link").each(function (index) { $(this).get(0).click() });

oder verwenden Sie jQuery, um auf eine Reihe von Links nach CSS-Klasse zu klicken

$(".my-link-class").each(function (index) { $(this).get(0).click() });
1
10GritSandpaper