Pass arguments from a button click to Jquery event handler

Question

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 ie

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

Answer 1

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

Answer 2

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

Answer 3

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);
);

Answer 4

You can pass parameters to be mapped to the event object which automatically linked to the event handler function by jQuery as the first parameter. Try the following:

 $(".selector").click({firstName: "John", lastName: "Doe"}, function myFunction(e){ console.log(e.data.firstName); console.log(e.data.lastName); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="selector">Click Me</button>