Wie übergeben Sie Ereignis als Parameter in JQuery-Funktion

Question

Hallo Ich lerne JQuery und ich habe eine kleine Funktion geschrieben, wo ich eine Funktion mit einem Klick Ereignis klicken.

dies ist das Kopfelement des HTML

<script type="text/javascript"> 

    $(pageLoaded); 

    function pageLoaded() 
    { 
     $("#Button1").bind("click", 
          { key1: "value1", key2: "value2" }, 
          function buttonClick(event) 
          { 
           $("#displayArea").text(event.data.key1); 
          } 
          ); 
    }      

</script> 

Dies ist der Körper des HTML ist

<input id="Button1" type="button" value="button" /> 

<div id = "displayArea" style="border:2px solid black; width:300px; height:200px"> 

Dieser Code funktioniert gut. Aber wenn ich versuche, die buttonClick-Funktion außerhalb der Anonymus-Methode zu schreiben, funktioniert es nicht mehr.

Ich habe versucht, es so zu nennen:

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick(event)); 

function buttonClick(var event) 
{ 
     $("#displayArea").text(event.data.key1); 
} 

Das funktioniert nicht. Mache ich einen Fehler beim Passieren des Events als Parameter? Was ist der richtige Weg, dies ohne anonyme Methoden zu tun?

Answer 1

Sie benötigen einen function reference als Click-Handler passieren, aber was machen Sie denn hier

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick(event)); 

ruft buttonClick(event) sofort und die return undefined und setzt das als click handler. Sie müssen eine Funktionsreferenz wie buttonClick übergeben und Sie werden automatisch Ereignisparameter erhalten (jQuery sendet das, wenn Sie den Handler aufrufen).

Voll Code:

$(function(){ 
    $("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick); 

    function buttonClick(event) 
    { 
     $("#displayArea").text(event.data.key1); 
    } ​ 
}); 

Demo:http://jsfiddle.net/joycse06/cjc9r/

---

Update (Based On @ Tadeck Kommentar):

Ihr Code wird gut funktionieren, wenn Sie Verwenden Sie function expression l ike diese

var buttonClick = function(event){ 
    $("#displayArea").text(event.data.key1); 
}; 

Und Sie haben diese first use über seinem Platz. In diesem Fall vor

$("#Button1").bind("click", ... 

Da function expressions nicht hoisted an der Spitze des aktuellen Bereichs wie function declaration. So können Sie sie verwenden only after die expression wurde interpreted von JS interpreter.

Answer 2

Es gibt zwei Fehler in Ihrer Lösung müssen Sie

ändern

var nur eine Variable nicht einen Parameter einer Funktion zu definieren

function buttonClick(event) 
{ 
    $("#displayArea").text(event.data.key1); 
} 

verwendet wird

Die andere Sache ist die Art, wie Sie die Zuordnung werden der Ereignishandler. Sie weisen den Rückgabewert buttonClick(event) zu, der undefined lautet. Übergeben Sie einfach die Funktion selbst.Das event Objekt wird als erste Person tatsächlich zu erklären, was sie tun falsch, anstatt nur Entsendung Code automatisch von jQuery

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick);