從HTML中onClick屬性調用jQuery方法

我在貫穿整個系統實現JQuery方面比較新，我很享受這個機會。從HTML中onClick屬性調用jQuery方法

我遇到過一個問題，我很想找到正確的解決方案。

這裏是什麼，我想做一個簡單的案例：

我有一個頁面上的一個按鈕，並在單擊事件我想打電話給我已經定義了一個jQuery函數。

這裏是我用來定義我的方法的代碼（Page.js）：

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

這裏是我的HTML頁面：

<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>

（上面的代碼顯示的按鈕，但點擊什麼都不做）

我知道我可以在文檔就緒事件中添加click事件，但是看起來更容易將事件放入HTML元素中。但是我還沒有找到辦法做到這一點。

有沒有辦法在按鈕元素（或任何輸入元素）上調用jquery函數？還是有更好的方法來做到這一點？

感謝

編輯：

謝謝您的回覆，看來我沒有正確使用JQuery。我真的很想看到以這種方式使用JQuery的系統示例以及如何處理事件。如果你知道任何示例來證明這一點，請讓我知道。

我使用JQuery的基本目標是幫助簡化和減少大規模Web應用程序所需的JavaScript數量。

來源

2010-04-20 Russell

我不認爲有任何理由將此函數添加到JQuery的名稱空間。爲什麼不只是由其自身確定的方法：

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

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

UPDATE：一個小的改變如何你的方法是指我可以得到它的工作：

<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>

來源

2010-04-20 03:40:06 Dexter

這是一個示範作用，來展示問題。 – Russell 2010-04-20 03:44:46

行..我已經更新了一個例子，它使用你喜歡的方法工作 - 無論是有限還是無限。 – Dexter 2010-04-20 04:07:42

謝謝@Dexter，這工作得很好:)注意版本1.4.2的作品，而1.3.2不會工作。 – Russell 2010-04-20 04:31:10

你忘了加這在你的函數：改成這樣：

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

來源

2010-04-20 03:45:07 Puaka

這仍然不起作用。 :( – Russell 2010-04-20 03:50:25

這不起作用..至少在我的測試 – Dexter 2010-04-20 03:50:45

這個工程....

<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>

編輯

您使用使用$別名故障保護jQuery代碼...它應該這樣寫：

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

或

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

注意，它在每一個它的 'jQuery的' 字....

來源

2010-04-20 04:03:38 Reigel

嗨@Reigel，謝謝。這是我正在尋找:) – Russell 2010-04-20 04:08:03

這是一種常見的/流行的方式來處理這種全球性的功能暴露？ – Russell 2010-04-20 04:08:26

請參閱編輯 – Reigel 2010-04-20 04:13:36

不要這樣做！

遠離事件的內容與元素！如果你沒有，JQuery的you're missing the point（或者至少是最大的一個）。

爲什麼很容易以一種方式定義click（）處理程序，而不是另一種方式是因爲另一種方式根本不可取。由於您只是在學習JQuery，所以請遵守慣例。現在不是JQuery決定其他人做錯了，你有更好的方法的時候了！

來源

2010-04-20 04:17:44

嗨@Dave，我不是說所有人都做錯了。我想知道如何jquery可以「簡化JavaScript」，而不是添加事件內聯添加事件到一個單獨的js文件中的javascript函數調用列表？開發人員將如何知道哪些元素會觸發哪些事件？我很感謝你的回答，並且真的很喜歡使用（並且不是針對）Jquery。 :) – Russell 2010-04-20 05:15:20

有幾種方法可以做到這一點。您不必擁有單獨的JS文件。如果您願意，您可以將腳本粘貼到文件頂部的

我知道這是很久以前回答，但如果你不介意創建按鈕動態，這個作品只使用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>

來源

2017-04-26 22:48:19

相關問題