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

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> 

Answer 2

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>

Answer 3

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/

Answer 4

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> 

Answer 5

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