Вызов метода 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>
(Вышеупомянутый код отображает кнопку, но нажатие ничего не делает.)
Я знаю, что мог добавить событие щелчка в документе готовое событие, однако это кажется более удобным в сопровождении для помещения событий в элемент HTML вместо этого. Однако я не нашел способ сделать это.
Существует ли способ вызвать функцию jQuery на элементе кнопки (или каком-либо входном элементе)? Или существует ли лучший способ сделать это?
Спасибо
Править:
Спасибо за Ваши ответы, кажется, что я не использую JQuery правильно. Я действительно любил бы видеть пример системы с помощью JQuery этот путь и как обрабатываются события. Если Вы знаете о каких-либо примерах, чтобы продемонстрировать, что это сообщило мне.
Моя базовая цель по использованию JQuery состоит в том, чтобы помочь упростить и уменьшить сумму JavaScript, требуемого для крупномасштабного веб-приложения.
4 ответа
Я не думаю, что есть причина добавлять эту функцию в пространство имен 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>
Не делай этого!
Не помещайте события в соответствие с элементами! Если вы этого не сделаете, вы упустите точку JQuery (или, по крайней мере, одну из самых важных).
Причина, по которой легко определять обработчики click () одним способом, а не другим, заключается в том, что другой способ просто нежелателен. Поскольку вы только изучаете JQuery, придерживайтесь соглашения. Сейчас не время для вашего обучения JQuery, чтобы решить, что все остальные делают это неправильно, и что у вас есть способ получше!
вы забыли добавить это в свою функцию: {{ 1}} измените на это:
<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />
это работает ....
<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>
edit
вы используете отказоустойчивый код jQuery с псевдонимом $ ... он должен быть записан как:
(function($) {
// plugin code here, use $ as much as you like
})(jQuery);
или
jQuery(function($) {
// your code using $ alias here
});
обратите внимание, что в каждом из них есть слово jQuery ... .