4

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

Improve this question
4

5 Answers 5

Reset to default
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>

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

2 Comments

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

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/

Improve this answer

9 Comments

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
see another method in @prasad's answer, why you downvoted my answer?
Eval is a bad solution, it is better to avoid it if it possible, and in this case it is.
why eval is bad ?
@MarioSantini it could be bad solution but its working and also one of the method to solve the above problem.
|
0

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>

Improve this answer

2 Comments

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 .
@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.
0

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

4 Comments

window[function_name].call is not a function
@Veer can you send me a link of example of this window[fun].call();
@PraveenRawat testrepo.skyptech.com/dynamiccall.php check this link i dont have document as such but i am using this in my projects
@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
0

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>
Improve this answer

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.