I am trying to pass the argument to the JQuery event handler when a button is being clicked. In plain JavaScript i was using onclick="function(argument)" Now i am transferring all of my inline click events to external call like one with Jquery i.e

 $(".selector").click(function(){
//some code
});

However, in this case i am confused how i can pass the arguments from the HTML tag and how should i receive the arguments in the Jquery event handler. Please help.

I am trying to pass the argument to the JQuery event handler when a button is being clicked. In plain JavaScript i was using onclick="function(argument)" Now i am transferring all of my inline click events to external call like one with Jquery i.e

 $(".selector").click(function(){
//some code
});

However, in this case i am confused how i can pass the arguments from the HTML tag and how should i receive the arguments in the Jquery event handler. Please help.

• javascript
• jquery
• html

• can you please share the html and show which argument you want to pass – brk Commented Jan 18, 2018 at 3:25
• Can you add a plete example of your Javascript function? It could help answerers to convert it to a Jquery function – Raul Sauco Commented Jan 18, 2018 at 3:31

3 Answers 3

An optional object of data passed to an event method when the current executing handler is bound.

In your case it will be something like this -

$(".selector").on("click", function(event){
    //you can access the parameter value as follows
    console.log(event.target.value);
});

Refer the official documentation here Pass arguments from a button click to Jquery event handler

The .click() function receives an EventData object that gets passed as the first argument to the handler, you can use that object inside the handler.

For example:

$('.selector').click(function(data) {
  $(data).addClass('newClass');
});

If you are trying to pass data from the HTML the cleanest way might be to store that data into the data attribute of your tag.

The HTML

<div id="mydiv" data-arg="Hello world!">Click me</div>

The JS

$('#mydiv').click(function(data) {
  var arg = $(data).attr('data-arg');
  console.log(arg);
});

For what you are trying to achieve

The HTML

<button id="dark" data-stroke-width="0.5" 
  class="txtcolor uk-button" type="button">1px</button>

The JS

$('button#dark').click(function(data) {
  selectStroke($(data).attr('data-stroke-width'));
});    

Check the documentation for click

A sample:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

var param_obj = {data : {param1: "Hello", param2: "World"}};
cool_function(param_obj);


$("dark").click({param1: 0.5}, selectStroke);

or

var i = 0.5;
$("dark").click({param1: i}, selectStroke);

or if you do not want change functionality of the handler

var i = 0.5;
$("dark").click({param1: i}, function() {
    selectStroke(event.data.param1);
);