Calling jQuery method from onClick attribute in HTML

前端未结

关注

 5  1269

半阙折子戏

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 corr

相关标签:

5条回答

生来不讨喜

2020-12-14 17:05

this works....

<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

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

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

note that it has a 'jQuery' word in each of it....

0 讨论(0)

无人共我

2020-12-14 17:10

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!

0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2020-12-14 17:11

I know this was answered long ago, but if you don't mind creating the button dynamically, this works using only the jQuery framework:

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

0 讨论(0)

忘了有多久

2020-12-14 17:17
you forgot to add this in your function : change to this :
```
<input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2020-12-14 17:18

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);
};

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

UPDATE: With a small change to how your method is defined I can get it to work:

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

0 讨论(0)