JQuery dynamically changes the name of a function

Question

We have written some function in jquery. When the user clicks on each div, we need to dynamically call each function.

   <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 does not work, error - this window [function_name] is not a function. How to solve this problem?

Also suggest another 2,3 methods

Answer 1

You can just use the 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>

Run codeHide result

And you can do it too.

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

Run codeHide result

Answer 2

Umm .. You can create a summary function for 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

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

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

. https://jsfiddle.net/f6z04dfq/

Answer 4

, .

div, .

.

.

: , - , ?

, .

, :

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>

Hide result

Answer 5

.

window[fun].call();

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