it-swarm.com.de

Verwenden von jQuery zum Auslösen des HTML-Onclick-Ereignisses

<input type="text" id="test_value" name="test_value" value="xyz" />
<input id="test_default" name="test_default" type="checkbox" onclick="with(this.form.elements['test_value']) { disabled = this.checked; if (this.checked) { value = ''; } else {if(value=='') {value=' '; value = '';}}};" />

Der Inline-Onclick wird von einem CMS generiert, auf das ich keinen Einfluss habe. Ich möchte $("#test_default").click(); mit jQuery ausführen, aber das funktioniert nicht, weil es nicht an den Event Manager von jQuery gebunden ist.

Ich habe Variationen ausprobiert

$("#test_default").click(function (e) {
                    $(e.target).attr("onclick").apply(checkbox, [e]);
                    return false;
                }).click();

aber ohne Erfolg. Bitte helfen.

Vielen Dank.

Es gibt Dutzende verschiedener Funktionen, die beim Onclick inline sein können. Es ist nicht wirklich eine Option, sie zu duplizieren und parallel auszuführen.

Die Antworten funktionieren in einer kleinen Demo, jedoch nicht in der Live-Umgebung. Bitte schauen Sie nach http://jsfiddle.net/GtJjt/ Ich brauche, dass die Checkbox programmgesteuert ausgelöst wird.

Bizarrerweise löst nur $("#metadata_field_text_10190_default")[0].click(); das Ereignis korrekt aus. Kann das jemand erklären?

28
Simon

Rufen Sie das native DOM onclick direkt auf ( siehe Demo ):

$("#test_default")[0].onclick();

Oder ohne jQuery überhaupt

document.getElementById("test_default").onclick();

Update:

Das eigentliche Problem liegt in der Interaktion zwischen jQueries .click() und dem Inline-Code onclick. Die Funktion .click() von jQuery führt zwei Dinge aus: it first löst alle Event-Handler aus, einschließlich den Inline-Code onclick, dann das Kontrollkästchen wird aktiviert .

Das Problem entsteht, weil der Inline-Code prüft, ob das Kontrollkästchen aktiviert ist. Da dies zuerst ausgelöst wird, stellt der Code fest, dass das Kontrollkästchen nicht markiert ist und nichts tut. Nachdem dies abgeschlossen ist, geht jQuery dann zum Checkbox.

Wie können wir das beheben? Wir markieren das Kontrollkästchen zuerst manuell und rufen dann den Inline-Handler auf. Leider können wir die .click() von jQuery nicht zum Aufruf des Inline-Handlers verwenden, da das Kontrollkästchen erneut deaktiviert wird (es werden auch andere jQuery-gebundene Event-Handler aufgerufen, wenn Sie diese in der Zukunft hinzufügen. Das möchten Sie wahrscheinlich nicht.) Daher verwenden wir die native DOM-Methode, die ich zuvor beschrieben habe, da sie nur den Inline-Code ausführen kann.

Der letzte Code lautet:

$("#metadata_field_text_10190_default").attr("checked", true)[0].onclick();

Siehe Demo: http://jsfiddle.net/GtJjt/3/ . (Ich habe einen console.log in den Inline-Code für die Demo aufgenommen, um nachzuweisen, dass der Inline-Code ausgeführt wurde. Entfernen Sie diesen Code, wenn Ihr Browser nicht Firefox oder Chrome ist oder abstürzt).

Wieder aktualisieren:

Ich habe Ihre Lösung nicht früher gesehen, Simon. Danke, dass Sie mich an [0].click() erinnert haben. Im Wesentlichen ist es das native Äquivalent für jQueries .click() und funktioniert, weil es das tut, was ich oben beschrieben habe (zuerst das Kontrollkästchen aktivieren und dann den Inline-Code aufrufen). Eine Warnung: Dies ruft auch alle Event-Handler auf, die an jQuery gebunden sind. Dies ist möglicherweise nicht das, was Sie wollen.

39
David Tang

Einfach nicht return false und es wird aufgerufen:

$("#test_default").click(function (e) {
  //hi!
}).click();

Wenn Sie eine Standardaktion verhindern möchten, verwenden Sie stattdessen e.peventDefault() , wodurch das Ereignis nicht beendet wird. In Bezug auf Ihren Inline-onclick -Handler (warum nicht all unauffällig?), Empfehle ich dringend, with zu verwenden.

2
Nick Craver

Ich habe den Auslöser in HTML mit Onclick-Ereignis wie folgt verwendet:

$("#test_default").trigger("onclick");
2
borchvm

Ich benutze den nächsten Code:

$("your_selector")[0].click();

In Ihrem Fall:

 $("#test_default")[0].click();
0