2010-04-20 74 views
23

Tôi tương đối mới để triển khai JQuery trong toàn bộ hệ thống và tôi đang tận hưởng cơ hội này.Gọi phương thức jQuery từ thuộc tính onClick trong HTML

Tôi đã gặp một vấn đề tôi rất muốn tìm giải pháp chính xác cho.

Dưới đây là một ví dụ trường hợp đơn giản về những gì tôi muốn làm:

Tôi có một nút trên một trang, và về sự kiện click Tôi muốn gọi một hàm jquery tôi đã xác định.

Đây là mã tôi đã sử dụng để xác định phương pháp của tôi (Page.js):

(function($) { 
$.fn.MessageBox = function(msg) { 
    alert(msg); 
}; 
}); 

Và đây là trang HTML của tôi:

<HTML> 
<head> 
<script type="text/javascript" src="C:\Sandpit\jQueryTest\jquery-1.3.2.js"></script> 
<script language="javascript" src="Page.js"></script> 
</head> 
<body> 
<div class="Title">Welcome!</div> 
<input type="button" value="ahaha" onclick="$().MessageBox('msg');" /> 
</body> 
</HTML> 

(Đoạn mã trên sẽ hiển thị nút, nhưng nhấp vào không có gì.)

Tôi biết rằng tôi có thể thêm sự kiện nhấp vào trong sự kiện sẵn sàng tài liệu, tuy nhiên có vẻ như có thể duy trì được nhiều sự kiện hơn trong phần tử HTML thay thế. Tuy nhiên tôi đã không tìm thấy một cách để làm điều này.

Có cách nào để gọi hàm jquery trên phần tử nút (hoặc bất kỳ phần tử đầu vào nào) không? Hoặc là có một cách tốt hơn để làm điều này?

Cảm ơn

EDIT:

Cảm ơn bạn đã trả lời của bạn, nó xuất hiện tôi không sử dụng JQuery một cách chính xác. Tôi thực sự rất thích nhìn thấy một ví dụ về một hệ thống sử dụng JQuery theo cách này và cách xử lý sự kiện. Nếu bạn biết bất kỳ ví dụ để chứng minh điều này xin vui lòng cho tôi biết.

Mục tiêu cơ bản của tôi để sử dụng JQuery là giúp đơn giản hóa và giảm lượng javascript cần thiết cho một ứng dụng web có quy mô lớn.

Trả lời

24

Tôi không nghĩ có bất kỳ lý do nào để thêm hàm này vào không gian tên của JQuery. Tại sao không chỉ xác định phương pháp này bằng cách riêng của mình:

function showMessage(msg) { 
    alert(msg); 
}; 

<input type="button" value="ahaha" onclick="showMessage('msg');" /> 

CẬP NHẬT: Với một sự thay đổi nhỏ để làm phương pháp của bạn được định nghĩa tôi có thể lấy nó để làm việc:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script language="javascript"> 
    // define the function within the global scope 
    $.fn.MessageBox = function(msg) { 
     alert(msg); 
    }; 

    // or, if you want to encapsulate variables within the plugin 
    (function($) { 
     $.fn.MessageBoxScoped = function(msg) { 
      alert(msg); 
     }; 
    })(jQuery); //<-- make sure you pass jQuery into the $ parameter 
</script> 
</head> 
<body> 
<div class="Title">Welcome!</div> 
<input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" /> 
</body> 
</html> 
+0

Đây là một chức năng ví dụ, để chứng minh vấn đề. – Russell

+1

OK .. Tôi đã cập nhật một ví dụ hoạt động bằng cách sử dụng phương pháp ưa thích của bạn - cả hai phạm vi hoặc không được trang bị. – Dexter

+0

Cảm ơn @Dexter, đã hoạt động tốt :) Lưu ý phiên bản 1.4.2 hoạt động, trong khi 1.3.2 sẽ không hoạt động. – Russell

4

bạn quên để thêm này trong chức năng của bạn: thay đổi này:

<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" /> 
+1

Điều này vẫn không hoạt động. :( – Russell

+0

Điều này không hoạt động .. ít nhất là trong các bài kiểm tra của tôi – Dexter

4

làm việc này ....

<script language="javascript"> 
    (function($) { 
    $.fn.MessageBox = function(msg) { 
     return this.each(function(){ 
     alert(msg); 
     }) 
    }; 
    })(jQuery);​ 
</script> 

.

<body> 
     <div class="Title">Welcome!</div> 
    <input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" /> 
    </body> 

chỉnh sửa

bạn đang sử dụng một failsafe jQuery mã sử dụng $ alias ...nó nên được viết như sau:

(function($) { 
    // plugin code here, use $ as much as you like 
})(jQuery); 

hoặc

jQuery(function($) { 
    // your code using $ alias here 
}); 

lưu ý rằng nó có một chữ 'jQuery' trong mỗi nó ....

+0

Hi @Reigel, cảm ơn. Đây là những gì tôi đang tìm :) – Russell

+0

Đây có phải là cách phổ biến/phổ biến để xử lý loại tiếp xúc chức năng toàn cầu này không? – Russell

+0

vui lòng xem chỉnh sửa – Reigel

4

Đừng làm điều này!

Tránh xa việc đặt sự kiện trực tuyến với các yếu tố! Nếu bạn không, you're missing the point của JQuery (hoặc một trong những cái lớn nhất ít nhất).

Lý do tại sao việc xác định trình xử lý click() một cách dễ dàng và không phải cách khác là cách khác đơn giản là không mong muốn. Vì bạn chỉ học JQuery, hãy tuân theo quy ước. Bây giờ không phải là thời gian trong đường cong học tập của bạn cho JQuery để quyết định rằng mọi người khác đang làm điều đó sai và bạn có một cách tốt hơn!

+1

Xin chào @Dave, tôi không nói rằng mọi người khác đang làm sai. Tôi tự hỏi làm thế nào jquery có thể "đơn giản hóa javascript" nếu thay vì thêm sự kiện nội tuyến để thêm các sự kiện vào một danh sách các cuộc gọi chức năng javascript trong một tập tin js riêng biệt? Làm thế nào một nhà phát triển có thể biết được sự kiện nào được hiệu lực bởi các yếu tố nào? Tôi đánh giá cao câu trả lời của bạn và thực sự muốn sử dụng (và làm việc với, không chống lại) Jquery. :) – Russell

+0

Có một số cách để thực hiện việc này. Bạn không cần phải có một tệp JS riêng biệt. Nếu bạn muốn, bạn chỉ có thể dán tập lệnh của mình vào một khối

0

Tôi biết điều này đã được trả lời từ lâu, nhưng nếu bạn không nhớ tạo nút tự động, công trình này chỉ sử dụng khuôn khổ jQuery:

$(document).ready(function() { 
 
    $button = $('<input id="1" type="button" value="ahaha" />'); 
 
    $('body').append($button); 
 
    $button.click(function() { 
 
    console.log("Id clicked: " + this.id); // or $(this) or $button 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>And here is my HTML page:</p> 
 

 
<div class="Title">Welcome!</div>

Các vấn đề liên quan