Вызов метода jQuery из атрибута onClick в HTML

Я относительно новичок в реализации 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 на элемент кнопки (или любой элемент ввода)? Или есть лучший способ сделать это?

Спасибо

EDIT:

Спасибо за ваши ответы, похоже, я не правильно использую JQuery. Мне бы очень хотелось увидеть пример системы, использующей JQuery таким образом и как обрабатываются события. Если вы знаете какие-либо примеры, чтобы продемонстрировать это, пожалуйста, дайте мне знать.

Моя основная цель использования JQuery заключается в том, чтобы упростить и уменьшить количество javascript, необходимое для крупномасштабного веб-приложения.

Ответ 1

Я не думаю, что есть какая-то причина для добавления этой функции в пространство имен JQuery. Почему бы просто не определить метод самостоятельно:

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

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

ОБНОВЛЕНИЕ. С небольшим изменением того, как определяется ваш метод, я могу заставить его работать:

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

Ответ 2

вы забыли добавить этот в свою функцию: измените на это:

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

Ответ 3

это работает....

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

Ответ 4

Не делай этого!

Не вмешивайтесь в события с элементами! Если вы этого не сделаете, вам не хватает точки JQuery (или, по крайней мере, одного из самых больших).

Причина, по которой легко определить обработчики click() одним способом, а не другим, заключается в том, что другой способ просто нежелателен. Поскольку вы просто учите JQuery, придерживайтесь конвенции. Сейчас не время в вашей кривой обучения для JQuery, чтобы решить, что все остальные делают это неправильно, и у вас есть лучший способ!

Ответ 5

Я знаю, что на это был дан ответ давно, но если вы не возражаете создать кнопку динамически, это работает с использованием только рамки 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>