Вызов метода jQuery из атрибута onClick в HTML - PullRequest
Новая
       17

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

24 голосов
/ 20 апреля 2010

Я относительно новичок в реализации JQuery во всей системе, и я наслаждаюсь этой возможностью.

Я столкнулся с одной проблемой, для которой я бы хотел найти правильное решение.

Вот простой пример того, что я хочу сделать:

У меня есть кнопка на странице, и в случае события click я хочу вызвать определенную мной функцию 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 в событие ready документа, однако кажется, что вместо этого удобнее добавлять события в элемент HTML. Однако я не нашел способ сделать это.

Есть ли способ вызвать функцию jquery для элемента кнопки (или любого элемента ввода)? Или есть лучший способ сделать это?

Спасибо

EDIT:

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

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

Ответы [ 5 ]

27 голосов
/ 20 апреля 2010

Не думаю, что есть какая-либо причина добавлять эту функцию в пространство имен 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>
4 голосов
/ 20 апреля 2010

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

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

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

4 голосов
/ 20 апреля 2010

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

<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 с использованием $ alias ... он должен быть записан как: 

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

или 

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

обратите внимание, что в каждом из них есть слово jQuery ...

4 голосов
/ 20 апреля 2010

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

<input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
0 голосов
/ 27 апреля 2017

Я знаю, что на этот вопрос давным-давно ответили, но если вы не возражаете против динамического создания кнопки, это работает с использованием только инфраструктуры 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...