it-swarm.dev

Wie kann man den onClick-Handler dynamisch ändern?

Ich bin mir sicher, dass es eine Million Posts darüber gibt, aber überraschenderweise habe ich Probleme, etwas zu finden.

Ich habe ein einfaches Skript, in dem ich den onClick-Handler für einen <A> -Link bei der Initialisierung der Seite festlegen möchte.

Wenn ich dies starte , erhalte ich sofort eine 'foo'-Warnbox, in der ich erwartet habe, nur eine Warnmeldung zu erhalten, wenn ich auf den Link klicke.

Was mache ich blöd falsch? (Ich habe versucht, click = und onClick =) ...

<script language="javascript">

    function init(){

        document.getElementById("foo").click = new function() { alert('foo'); };
    }

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

Bearbeiten: Ich habe meine akzeptierte Antwort in eine jQuery-Antwort geändert. Die Antwort von ' Már Örlygsson ' ist technisch die richtige Antwort auf meine ursprüngliche Frage (click sollte onclick sein und new sollte entfernt werden), aber ich Halten Sie jeden davon ab , 'document.getElementById (...) direkt in Ihrem Code zu verwenden - und verwenden Sie stattdessen jQuery .

49
Simon_Weaver

jQuery:

$('#foo').click(function() { alert('foo'); });

Oder wenn Sie nicht möchten, dass der Link href folgt:

$('#foo').click(function() { alert('foo'); return false; });
22
Darryl Hein

Versuchen:

document.getElementById("foo").onclick = function (){alert('foo');};
68
CMS

Verwenden Sie .onclick (alles in Kleinbuchstaben). So wie:

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

Tatsächlich werden Sie wahrscheinlich mit der Verwendung einer guten Bibliothek (ich empfehle jQuery aus mehreren Gründen) viel besser, um Sie zum Laufen zu bringen und sauberes Javascript zu schreiben.

Browserunabhängige (In) Kompatibilitäten sind für jeden ein richtiger Anlass - ganz zu schweigen von jemandem, der gerade erst anfängt.

35
Már Örlygsson

Ich habe neulich mehr oder weniger alle anderen Lösungen ausprobiert, aber bis jetzt habe ich keine davon für mich gearbeitet:

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

Soweit ich das beurteilen kann, funktioniert es perfekt.

10
Selin Ebeci

Wenn Sie Variablen aus der aktuellen Funktion übergeben möchten, können Sie dies beispielsweise folgendermaßen tun:

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

Wenn Sie keine Informationen von dieser Funktion übergeben müssen, ist es einfach:

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
9
yuttadhammo

OMG ... Es ist nicht nur ein Problem von "jQuery Library" und "getElementById".

Sicher, jQuery hilft uns, Cross-Browser-Probleme beiseite zu legen, aber die traditionelle Methode ohne Bibliotheken zu verwenden, kann trotzdem gut funktionieren, wenn Sie JavaScript wirklich verstehen. GENUG !!!

Sowohl @ Már Örlygsson als auch @Darryl Hein gaben Ihnen gute ALTARNATIVEN (ich würde sagen, sie sind nur Altarnative, keine Antworten), wo die erstere den traditionellen Weg und den letzteren jQuery-Weg verwendet. Aber wissen Sie wirklich die Antwort auf Ihr Problem? Was stimmt nicht mit deinem Code?

Erstens ist .click ein jQuery-Weg. Wenn Sie die traditionelle Methode verwenden möchten, verwenden Sie stattdessen .onclick. Oder ich empfehle Ihnen, sich auf die Verwendung von jQuery zu konzentrieren, wenn Sie verwirrt sind. jQuery ist ein gutes Werkzeug, ohne DOM genug zu kennen.

Das zweite Problem, auch das kritische, new function(){}, ist eine sehr schlechte Syntax oder eine falsche Syntax.

Egal, ob Sie mit jQuery oder ohne jQuery gehen möchten, Sie müssen dies klarstellen.

Es gibt 3 grundlegende Möglichkeiten, Funktionen zu deklarieren:

function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object

Beachten Sie, dass Javascript die GroßKleinschreibung beachtet -/ist, daher ist new function() keine Standardsyntax von Javascript. Browser können die Bedeutung missverstehen.

So kann Ihr Code auf die zweite Art als geändert werden

 = function(){alert();}

Oder mit dem dritten Weg als

 = new Function("alert();");

Der zweite Weg funktioniert fast genauso wie der dritte Weg, und der zweite Weg ist sehr verbreitet, während der dritte Weg selten ist. Ihre beiden besten Antworten verwenden den zweiten Weg.

Der dritte Weg kann jedoch etwas tun, was der zweite wegen "Laufzeit" und "Kompilierzeit" nicht kann. Ich hoffe nur, dass Sie wissen, dass new Function() manchmal nützlich sein kann. Eines Tages stoßen Sie auf Probleme mit function(){}. Vergessen Sie new Function() nicht.

Um mehr zu verstehen, empfehlen wir Ihnen, << JavaScript: The Definitive Guide, 6th Edition >>, O'Reilly, zu lesen.

5
Eric

Ich stimme zu, dass die Verwendung von jQuery die beste Option ist. Sie sollten auch die Onload-Funktion von body vermeiden und stattdessen die Ready-Funktion von jQuery verwenden. Die Ereignis-Listener sollten Funktionen sein, die ein Argument enthalten:

document.getElementById("foo").onclick = function (event){alert('foo');};

oder in jQuery:

$('#foo').click(function(event) { alert('foo'); }
2
kgiannakakis

Hier ist das YUI-Pendant zu den jQuery-Posts oben.

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>
1
blak3r

Niemand sprach das eigentliche Problem an, um zu erklären, warum die Warnung ausgegeben wurde. 

Dieser Code: document.getElementById("foo").click = new function() { alert('foo'); }; weist die click-Eigenschaft des #foo-Elements einem leeren Objekt zu. Die anonyme Funktion hier soll das Objekt initialisieren. Ich sehe diese Art von Funktion gerne als Konstruktor. Sie legen den Alert dort ab, damit er aufgerufen wird, da die Funktion sofort aufgerufen wird. 

Siehe diese Frage

0
Steven Lu

Ich denke, Sie möchten die Methoden .bind und .unBind von jQuery verwenden. Das Ändern des Klickereignisses mithilfe von .click und .onclick rief das neu zugewiesene Ereignis in meinen Tests an, was zu einer unendlichen Schleife führt. 

Wenn Sie zum Beispiel zwischen den Ereignissen hide () und unHide () umschalten und durch Klicken auf eines der Ereignisse das Klickereignis zum anderen wechselt, befinden Sie sich in einer Endlosschleife. Ein besserer Weg wäre, dies zu tun:

$(element).unbind().bind( 'click' , function(){ alert('!') } ); 
0
lamarant

Das YUI-Beispiel oben sollte wirklich lauten:

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>
0