Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
642 views
in Technique[技术] by (71.8m points)

function - Calling jQuery method from onClick attribute in HTML

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:

<HTML>
<head>
 <script type="text/javascript" src="C:SandpitjQueryTestjquery-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>

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...