Calling jQuery method from onClick attribute in HTML

Question

I am relatively new to implementing JQuery throughout an entire system  and I am enjoying the opportunity   I have come across one issue I would love to find the correct resolve for   Here is a simple case example of what I want to do   I have a button on a page  and on the click event I want to call a jquery function I have defined    Here is the code I have used to define my method  Page js     function         fn MessageBox   function msg      alert msg             And here is my HTML page    lt HTML gt   lt head gt    lt script type  text javascript  src  C  Sandpit jQueryTest jquery-1 3 2 js  gt  lt  script gt    lt script language  javascript  src  Page js  gt  lt  script gt   lt  head gt   lt body gt    lt div class  Title  gt Welcome  lt  div gt    lt input type  button  value  ahaha   onclick      MessageBox  msg       gt   lt  body gt   lt  HTML gt     The above code displays the button  but clicking does nothing    I am aware I could add the click event in the document ready event  however it seems more maintainable to put events in the HTML element instead  However I have not found a way to do this   Is there a way to call a jquery function on a button element  or any input element   Or is there a better way to do this   Thanks  EDIT   Thank you for your responses  it appears I am not using JQuery correctly   I would really love to see an example of a system using JQuery this way and how events are handled  If you know of any examples to demonstrate this please let me know   My underlying goal for using JQuery is to help simplify and reduce the amount of javascript required for a large-scale web application

User · Accepted Answer

I don t think there s any reason to add this function to JQuery s namespace  Why not just define the method by itself   function showMessage msg       alert msg        lt input type  button  value  ahaha  onclick  showMessage  msg       gt    UPDATE   With a small change to how your method is defined I can get it to work    lt html gt   lt head gt    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt    lt script language  javascript  gt         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      lt -- make sure you pass jQuery into the   parameter   lt  script gt   lt  head gt   lt body gt    lt div class  Title  gt Welcome  lt  div gt    lt input type  button  value  ahaha  id  test  onClick    this  MessageBox  msg       gt   lt  body gt   lt  html gt

User · Answer

this works       lt script language  javascript  gt       function             fn MessageBox   function msg           return this each function             alert msg                            jQuery      lt  script gt           lt body gt         lt div class  Title  gt Welcome  lt  div gt        lt input type  button  value  ahaha   onclick    this  MessageBox  msg       gt       lt  body gt    edit  you are using a failsafe jQuery code using the   alias    it should be written like    function           plugin code here  use   as much as you like    jQuery      or   jQuery function            your code using   alias here        note that it has a  jQuery  word in each of it

User · Answer

I know this was answered long ago  but if you don t mind creating the button dynamically  this works using only the jQuery framework    x000D   x000D    document  ready function     x000D     button       lt input id  1  type  button  value  ahaha    gt     x000D       body   append  button   x000D     button click function     x000D      console log  Id clicked      this id       or   this  or  button x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt And here is my HTML page  lt  p gt  x000D   x000D   lt div class  Title  gt Welcome  lt  div gt  x000D   x000D   x000D

User · Answer

Don t do this   Stay away from putting the events inline with the elements   If you don t  you re missing the point of JQuery  or one of the biggest ones at least      The reason why it s easy to define click   handlers one way and not the other is that the other way is simply not desirable   Since you re just learning JQuery  stick to the convention   Now is not the time in your learning curve for JQuery to decide that everyone else is doing it wrong and you have a better way

User · Answer

you forgot to add this in your function   change to this     lt input type  button  value  ahaha   onclick    this  MessageBox  msg       gt

[jquery] Calling jQuery method from onClick attribute in HTML

Examples related to jquery

Examples related to function