Làm thế nào để vượt qua sự kiện dưới dạng tham số trong hàm JQuery

Question

Xin chào, tôi đang học JQuery và tôi đã viết một hàm nhỏ trong đó tôi đính kèm một hàm bằng sự kiện nhấp chuột của nút.

này là yếu tố đầu của HTML

<script type="text/javascript"> 

    $(pageLoaded); 

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

</script> 

Đây là cơ thể của HTML

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

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

Mã này hoạt động tốt. Nhưng khi tôi cố gắng viết chức năng buttonClick bên ngoài phương thức ẩn danh, nó không hoạt động nữa.

tôi cố gắng gọi nó theo cách này:

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

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

này không hoạt động. Tôi có mắc sai lầm nào trong khi chuyển tham số Event as? cách chính xác để làm điều đó mà không sử dụng các phương pháp nặc danh là gì?

Answer 1

Bạn cần phải vượt qua một function reference như xử lý nhấp chuột, nhưng những gì bạn đang làm gì ở đây

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

đang kêu gọi buttonClick(event) ngay lập tức và đó return undefined và thiết lập mà là click handler. Bạn phải chuyển một tham chiếu hàm như buttonClick và bạn sẽ nhận được sự kiện param tự động (jQuery sẽ gửi điều đó khi gọi trình xử lý).

Full Code:

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

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

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

---

Cập nhật (Dựa trên @ bình luận Tadeck của):

Mã của bạn sẽ hoạt động tốt nếu bạn sử dụng function expression l ike this

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

Và bạn phải đặt số này lên trên first use. Trong trường hợp này trước khi

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

Vì function expressions không hoisted ở phía trên cùng của phạm vi hiện tại như function declaration. Vì vậy, bạn có thể sử dụng chúng only afterexpression đã được interpreted bởi JS interpreter.

Answer 2

Có hai sai lầm trong giải pháp của bạn, bạn sẽ phải thay đổi

var chỉ được sử dụng để xác định một biến không phải là một tham số của một hàm

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

Điều khác là cách bạn đang gán xử lý sự kiện. Bạn đang chỉ định giá trị trả lại là buttonClick(event) sẽ là undefined. Chỉ cần vượt qua nó chức năng chính nó.Đối tượng event sẽ được chuyển tự động bởi jQuery

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