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.

Blender · Accepted Answer · 2012-07-07 05:14:25Z

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 7, 2012 at 5:14

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fabrício Matté Over a year ago

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

Blender Over a year ago

What if showMessage() modifies the current object (hence the $(this)) to show the message?

Fabrício Matté Over a year ago

I'll +1 as you're binding the listener, OP may decide what's important to keep or not besides that.

Jashwant Over a year ago

I liked the first point. To the point. Also the solution is quite cleaner and oo way :) +1

Dhanish · Accepted Answer · 2012-07-07 05:15:18Z

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 7, 2012 at 5:15

Dhanish

111 bronze badge

1 Comment

Fabrício Matté Over a year ago

That extra semi-colon doesn't make difference. ASI takes care of the lacking semi-colon.

Fabrício Matté · Accepted Answer · 2012-07-07 05:21:17Z

1

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

edited Jul 7, 2012 at 5:21

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

answered Jul 7, 2012 at 5:13

doniyor

38k62 gold badges183 silver badges272 bronze badges

2 Comments

doniyor Over a year ago

I am on the phone man, i canot find the symbol for emphasizing the code :D

Fabrício Matté Over a year ago

There, fixed the code. But I think there's still a closure problem with the function definition..

MarkFromFullerton · Accepted Answer · 2012-07-07 05:22:46Z

0

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

answered Jul 7, 2012 at 5:22

MarkFromFullerton

1797 bronze badges

Collectives™ on Stack Overflow

jquery call function on click

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related