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

Я относительно новичок в реализации JQuery во всей системе, и мне нравится эта возможность.Вызов метода jQuery из атрибута onClick в HTML

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

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

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

источник

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

OK .. Я обновил пример, который работает с использованием вашего предпочтительного метода - как с областью, так и с областью действия. – Dexter

Спасибо @Dexter, что сработало отлично :) Примечание 1.4.2 работает, а 1.3.2 не работает. – Russell

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

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

источник

2010-04-20 03:45:07 Puaka

Это все еще не работает. :( – Russell

Это не работает .. по крайней мере, в моих тестах – Dexter

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

<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

Является ли это распространенным/популярным способом обработки такого глобального воздействия? – Russell

см. Редактировать – Reigel

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

Держитесь подальше от событий, связанных с элементами! Если вы этого не сделаете, you're missing the point JQuery (или, по крайней мере, один из самых больших).

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

источник

2010-04-20 04:17:44

Привет @Dave, я не говорю, что все остальные делают это неправильно. Мне интересно, как jquery может «упростить javascript», если вместо добавления событий inline добавить события в список вызовов функций javascript в отдельном js-файле? Как разработчик узнает, какие события будут выпущены, какие элементы? Я ценю ваш ответ и очень хотел бы использовать (и работать, а не против) JQuery. :) – Russell

Существует несколько способов сделать это. Вам не нужно иметь отдельный 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

Смежные вопросы