Jquery dynamically change function name

Question

We written some function in jquery.When user click on each div we need to call each function dynamically.

 <div class="test" id="test1"></div>
 <div class="test" id="test2"></div>
function test1(){
 alert('test1');
 }
 function test2(){
 alert('test2');
 }
 $(".test").on("click",function(){
 var function_name=$(this).attr("id");
 window[function_name]();
 });

But this code is not working end the error is window[function_name] is not a function . How to solve this

also Please suggest another 2,3 methods

• rad11: stackoverflow.com/questions/359788/…
• jgondev: Check this out: stackoverflow.com/questions/359788/…
• Mohammad: No, it work. See jsfiddle.net/duevvfx8
• Mohammad: What is your problem while the code does work?

Answer 1

You can simply use window, It will work fine

function test1(){
 alert('You clicked on Test1');
 }
 function test2(){
 alert('You clicked on Test2');
 }
 $(".test").on("click",function(){
 var function_name=$(this).attr("id");
 
 var call_myFun = window[function_name];
 
 call_myFun()
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test1">Test 1</div>
 <div class="test" id="test2">Test 2</div>

And You can do this way also..

$(".test").on("click",function(){
 var function_name=$(this).attr("id");
 eval(function_name + "()");
 });
function test1(){
 alert('clicked on test1');
 }
 function test2(){
 alert('clicked on test2');
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test1">test1</div>
 <div class="test" id="test2">test2</div>

• Mohammad: The question solution work and no need to new solution. See jsfiddle.net/duevvfx8
• user7118434: alert("window[function_name]" )==[object HTMLImageElement] , and call_myFun() is not a function

Answer 2

instead of

var function_name=$(this).attr("id");
function_name();

use

var function_name=$(this).attr("id");
eval(function_name+"()");

see example https://jsfiddle.net/f6z04dfq/

• user7118434: thank you . it is working . I will up vote you , when i get 15 points . :) . Could you please suggest other methods. changing the div structure or code is not a problem
• Praveen Rawat: see another method in @prasad's answer, why you downvoted my answer?
• Mario Santini: Eval is a bad solution, it is better to avoid it if it possible, and in this case it is.
• user7118434: why eval is bad ?
• Praveen Rawat: @MarioSantini it could be bad solution but its working and also one of the method to solve the above problem.

Answer 3

On my point of view the approach to the problem is wrong.

If you have an id on your div you could bind the proper function to the event you desire.

That is the simple and effective solution to your problem.

The advantage on readability and maintainability is huge.

For example: what if some one in the future will change the name on a function in a way that the id don't match any more?

It is not easy to find the piece of code where the function is dynamically called.

So here is my proposal:

function test1() {
 console.log("Click on DIV 1");
}
function test2() {
 console.log("Click on DIV 2");
}
$(function(){
 $('#test1').click(test1);
 $('#test2').click(test2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test1">Test 1</div>
<div class="test" id="test2">Test 2</div>

• user7118434: thank you fro this suggestion . May be i have 100 div's . So in order to avoid $('#id').click(function); in 100 times i written the code .
• Mario Santini: @John if your case is to handle the click event on many different divs, this is a different problem. For example, if the code of function 1 and function n are similar, and are different only for data, than you could refactoring one function to fit all your cases. If this is the case, please update your question and I'll update my answer accordingly. Can't do it now as I don't have enough information.

Answer 4

you can call dynamic function using call method.

window[fun].call();

so in your case

$(".test").on("click",function(){
 var function_name=$(this).attr("id");
 window[function_name].call();
});

• user7118434: window[function_name].call is not a function
• Praveen Rawat: @Veer can you send me a link of example of this window[fun].call()
• Veer: @PraveenRawat testrepo.skyptech.com/dynamiccall.php check this link i dont have document as such but i am using this in my projects
• Veer: @john i try to test in jsfiddle but some how its not working there but you can check with this link testrepo.skyptech.com/dynamiccall.php

Answer 5

Umm.. You can create summary function to all your divs :

JQuery:

function xDiv(e){
 var i = $(e).attr("id");
 switch (i){
 case "test1":
 //Call matching function
 break; 
 case "test2":
 //Call matching function
 break; 
 case "test3":
 break;
 /*...*/
 default:
 break;
 }
 alert("This call from: " + i );
}

**HTML: **

<div id="test1" onclick="xDiv(this);">test1</div>
<div id="test2" onclick="xDiv(this);">test2</div>
<div id="test3" onclick="xDiv(this);">test3</div>
<div id="test4" onclick="xDiv(this);">test4</div>

• Govinda Sakhare: Writing switch case for every div id isn't elegant solution and not flexible too.