jQuery - Gọi hàm nội tuyến

Question

Tôi đang cố gắng chuyển một biến cho hàm nội tuyến jQuery (ví dụ: sử dụng onMouseOver="function();" trong liên kết thực tế (là thẻ khu vực từ bản đồ hình ảnh)).

Chức năng này chỉ được gọi nếu tôi đặt nó trước dòng $(document).ready(function(){, nhưng làm điều này đang gây ra tất cả các loại vấn đề với jQuery.

Tất cả tôi muốn là một thẻ đơn giản (như <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> để khởi động một chức năng được chứa trong cơ thể jQuery bình thường của mã.

Rất cám ơn sự giúp đỡ nào bạn có thể cung cấp.

Để minh họa điểm, các công việc sau:

<script type="text/javascript"> 
function myfunction(x) { alert(x); //Alerts 2 
} 
</script> 

<img src="/shared_images/loading.gif" border="0" usemap="#Map"> 
<map name="Map"><area shape="rect" coords="171,115,516,227" 
onMouseOver="myfunction('2')"></map> 

Nhưng sau không

<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
function myfunction(x) { alert(x); //Nothing happens 
} 
} 
</script> 

<img src="/shared_images/loading.gif" border="0" usemap="#Map"> 
<map name="Map"><area shape="rect" coords="171,115,516,227" 
onMouseOver="myfunction('2')"></map> 

Answer 1

Trong ví dụ thứ hai, bạn đã khai báo myfunctionbên trong chức năng ẩn danh bạn đang chuyển đến .ready(). Điều đó có nghĩa là myfunction là biến cục bộ, chỉ nằm trong phạm vi bên trong hàm ẩn danh đó và bạn không thể gọi nó từ bất kỳ nơi nào khác.

Có hai giải pháp.

Trước tiên, bạn có thể khai báo bên ngoài (trước hoặc sau) cuộc gọi đến .ready(). Điều này không nên gây ra bất kỳ sự can thiệp nào với jQuery. Nếu có, cái gì khác là sai (có lẽ là một lỗi cú pháp đơn giản?) Mà chúng tôi muốn chào đón bạn để đưa lên trong một câu hỏi StackOverflow.

Thứ hai, bạn không nên sử dụng onMouseOver="" để đính kèm trình xử lý sự kiện (khi kết hợp JavaScript với HTML), vì vậy, hãy loại bỏ hoàn toàn nó. Thay JavaScript với điều này:

$(document).ready(function() { 
    $("#that-area-down-there").mouseover(function() { 
     alert(2); 
    }); 
}); 

Và HTML của bạn với điều này:

<area shape="rect" coords="171,115,516,227" id="that-area-down-there" /> 

(. Có lẽ bạn sẽ muốn thay thế mà id với một cái gì đó có ý nghĩa hơn trong bối cảnh, tất nhiên)

Answer 2

Có hai lý do tại sao mã không hoạt động. Trước hết, bạn đang thiếu dấu đóng ngoặc trong cuộc gọi đến hàm sẵn sàng, do đó bạn gặp lỗi cú pháp.

Thứ hai, hàm mà bạn xác định bên trong hàm chỉ tồn tại trong phạm vi đó. Khi bạn thoát khỏi hàm, nó không tồn tại nữa.

Ví dụ:

$(document).ready(function(){ 
    function myfunction(x) { 
     alert(x); 
    } 
    myfunction(42); // here it works 
} 

myfunction(-1); // here it doesn't exist 

Bạn có thể xác định các chức năng trên toàn cầu từ bên trong hàm như thế này:

$(document).ready(function(){ 
    myfunction = function(x) { 
    alert(x); 
    } 
});