jquery call function on click

Question

I am facing a problem calling a function on click. The following is my code:

JavaScript:

$(document).ready(function(){       
    function showMessage(msg) {
        alert(msg);
    };      
})

HTML:

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

for some reasons I cant use click() function. Please help me.

score 4 · Answer 1 · answered Jul 07 '12 at 05:14

4

A few things:

showMessage() isn't a property of the jQuery object. It's just a regular function.
If you're using jQuery, don't use onclick. Bind all events with JavaScript.

There are a few ways of fixing this code. Here's one:

JavaScript:

$.fn.showMessage = function(message) {
  alert(message);
};

$(document).ready(function() {  
  $('#button').on('click', function() {
    $(this).showMessage('I am a message');
  });
});

HTML:

<input type="button" value="ahaha" id="button" />

answered Jul 07 '12 at 05:14

Blender

289,723
53
439
496

From all possible solutions, extending the jQuery object just makes the function more complex to call and adds the overhead of creating an unnecessary jQuery object.. – Fabrício Matté Jul 07 '12 at 05:19
What if `showMessage()` modifies the current object (hence the `$(this)`) to show the message? – Blender Jul 07 '12 at 05:21
I'll +1 as you're binding the listener, OP may decide what's important to keep or not besides that. – Fabrício Matté Jul 07 '12 at 05:26
I liked the first point. To the point. Also the solution is quite cleaner and oo way :) +1 – Jashwant Jul 07 '12 at 05:27

score 1 · Answer 2 · edited Jul 07 '12 at 05:21

1

without $(this) please.. Just call like this: onclick="showmessage('msg')"

edited Jul 07 '12 at 05:21

Fabrício Matté

69,329
26
129
166

answered Jul 07 '12 at 05:13

doniyor

36,596
57
175
260

I am on the phone man, i canot find the symbol for emphasizing the code :D – doniyor Jul 07 '12 at 05:20
There, fixed the code. But I think there's still a closure problem with the function definition.. – Fabrício Matté Jul 07 '12 at 05:23

score 1 · Answer 3 · answered Jul 07 '12 at 05:15

1

$(document).ready(function(){      
        function showMessage(msg) {
       alert(msg);
    };      <-----  i think this semicolon is not needed
        })  <-----  Should provide semicolon here as its the main function ending

answered Jul 07 '12 at 05:15

Dhanish

11
1

That extra semi-colon doesn't make difference. [ASI](http://stackoverflow.com/questions/7651231/what-does-asi-mean) takes care of the lacking semi-colon. – Fabrício Matté Jul 07 '12 at 05:16

score 0 · Answer 4 · answered Jul 07 '12 at 05:22

there are a few ways of doing this.

Let me make a few changes to your html,

<input id="myTest" value="CLICK ME!!!" title="HELLO WORLD!!!" type="button" />

next lets look at how to do this with jQuery

$(document).ready(function() {
  $('input#myTest').click(function() {
    var el = $(this),
        msg = el.attr('title');
    alert(msg);
  });
});

Hope this helps, Cheers

jquery call function on click

4 Answers4