JQuery event listener call function by name with parameters

Question

I have seen other questions similar to this one, but I cant seem to find the answer i'm looking for.

Is there any way of passing parameters into a named function in a JQuery event listener?

For example, I know I can do this

$('#myelement').on("change", function(){
  var value = $(this).val();   
  myFunction(value);
});

But is there any way to just pass the function name into the event listener instead?

Something like this

$('#myelement').on("change", myFunction($(this).val()));

I thought it would be straight forward to be honest, but I can't seem to find a way to do it.

If it was a static value, yes, but since value changes, not really. — epascarello
– epascarello, Commented Feb 12, 2018 at 19:24
Not possible to use $(this) as an argument this way. It does not refer to your event (refers to higher namespace). — ata
– ata, Commented Feb 12, 2018 at 19:33
You can pass function name but can't pass the value like that but I don't see the need of it because you can just get the value inside of the myFunction — Huangism
– Huangism, Commented Feb 12, 2018 at 19:37
Why is this a problem? Just do it the right way. The way that works. The second argument to .on should be a function. The way you're trying to do it, the argument would be the return value of the function instead. And the function would be called once, instead of every time a 'change' event was fired. If you don't like the syntax, you could do var handleChange = function() { var value = $(this).val(); myFunction(value); }; $('#myelement').on("change", handleChange);. — David Knipe
– David Knipe, Commented Feb 12, 2018 at 22:14

Raphael Cunha · Accepted Answer · 2018-02-12 19:35:37Z

2

You can use the jQuery "on" method, then invoke the click event listener and last but not least call the function that you created.

$('button').on('click', clicked);

function clicked() {
	var val = $('#one').val();
  $('.response').html('<p>Value is ' + val + '</p>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type="text" id="one">
<button>Click Me</button>

<p class="response"></p>

answered Feb 12, 2018 at 19:35

Raphael Cunha

1,1146 silver badges9 bronze badges

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

Comments

Kirill Simonov · Accepted Answer · 2018-02-12 21:34:12Z

1

You can pass parameters to the handler function using jQuery .on() method.

Its format is .on( events [, selector ] [, data ], handler ), where data is any object you need to pass. Later it can be accessed via event.data property in the handler.

Check this example. Note that if you just want to access $(this).val() then you don't need any parameters: myFunction is already bound to the target element, so you can use $(this).val() inside of it.

$("#i").on("change", null, "My parameter", myFunction);

function myFunction(event) {
   console.log("Parameter: " + event.data);
   console.log("$(this).val() = " + $(this).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i"> Enter something and press Enter

edited Feb 12, 2018 at 21:34

answered Feb 12, 2018 at 21:06

Kirill Simonov

8,4913 gold badges23 silver badges47 bronze badges

2 Comments

S_R Over a year ago

Brilliant, exactly what I was looking for! Thanks

Kirill Simonov Over a year ago

@S_R I was glad to help!

score 0 · Accepted Answer · 2018-02-12 19:37:01Z

0

Assuming I understand what you want, one workaround I've used is to refer to functions in an array like follows

list_of_functions = [function_1,function_2];

function function_1(){
  alert("function 1 running");
}
function function_2(){
  console.dir("function 2 running");  
}

function run_function(function_index){
  return list_of_functions[function_index]();
}

$("#function_select").on("change",function(){
  run_function(this.value);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="function_select">
  <option disabled selected>Please select a function</option>
  <option value="0">function 1</option>
  <option value="1">function 2</option>
</select>

edited Feb 12, 2018 at 19:37

answered Feb 12, 2018 at 19:24

user4490801

1 Comment

epascarello Over a year ago

I do not think what OP says in the text is what they actually meant.

Collectives™ on Stack Overflow

JQuery event listener call function by name with parameters

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related