Home/ Questions/Q 8078395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:46:47+00:00

How do you create a function in jQuery, call it, and pass a variable

  • 0

How do you create a function in jQuery, call it, and pass a variable to it? Here it is in Javascript style:

<script type="text/javascript">
function popup(msg) {
  alert(msg);
}
</script>

Then you would simply include the event in the HTML: 

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

What is the jQuery equivalent to doing this? From all the “newbie” tutorials, they are all static functions that do not accept variables. For example:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert('hello, world');
   });
});
</script>

I want to be able to dynamically include different messages. The code above affects all buttons and spits out the same message of ‘hello, world’.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want the message to be dynamic, you’re going to want to use data-attributes:

    <input class='message-button-' type="submit" data-message="My Message" />

    Then in a separate javascript file:

    // equivalent of $(document).ready(function(){...
$(function(){

  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});

    Now the function will execute any time a button with class .message-button is clicked, and it will use the custom attribute data-message to display a message.

    Hope this helps! 🙂

    Update:

    Note that it’s considered best-practice to do javascript unobstrusively. Some people have mentioned still using the onclick attribute like you did in your example, don’t do that. Bind the event like I’ve shown here using jquery’s .on('click', function(){}) method.

    If your click item is an anchor tag <a> then you can prevent the href from being followed if you want, by using e.preventDefault:

    $('a').on('click', function(e){
  e.preventDefault()
})

    Also in case you need to know, the $('.message-button') is using css selectors to grab dom elements. Any valid CSS selector will normally work in there.

    Step-by-step

    First, we need to wrap all of our code in a function provided by jQuery that waits until the document is ready to handle javascript actions and dom manipulation. The long-form version is $(document).ready(function(){ /* CODE GOES HERE */ }) but the version I’ve used is a shortcut $(function({ /* CODE GOES HERE */ }):

    $(function(){
})

    Next, we need to bind an event to our button. Since we’ve given it the class .message-button, we can use jQuery to grab that element and bind the ‘click’ event to it:

    $(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    // Code here executes when the input button is clicked
  })


});

    Inside of event handlers this is re-bound to point directly to the HTML element that triggered the event. Wrapping in $() gives us access to jquery methods. Thus: $(this) is used very frequently. jQuery gives us the .data() method to access any data-* methods on the element and give us the value, which is what the alert() is doing.

    $(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});
    • 0