jquery dynamic function

Question

I just need the logic and understanding on how I can do this.

The problem:

I have several functions that are very similar but I want to create/call the dynamically

Example:

$(document).ready(function() {         
    function foo() {
        $("#foo_elem").toggle(true).attr('required', true);
        alert('This is foo');
    }

    function bar() {
        $("#bar_elem").toggle(true).attr('required', true);
        alert('This is bar');
    }
});

How can I pass in foo/bar to create the function? Pseudo code

$(document).ready(function() { 
    // would pass foo/bar to this?        
    $($x)(function() {
        $("#"+$(this)+"_elem").toggle(true).attr('required', true);
        alert('This is '+$(this));
    });
});

Maybe your example doesn't cover the extend of your problem, but can't you just use one method with an argument? — Edwin V.
– Edwin V., Commented Apr 7, 2011 at 15:19

Tejs · Accepted Answer · 2011-04-07 15:19:40Z

10

You want to dynamically call foo or bar?

function callMethod(method)
{
     method();
}

callMethod(foo); // foo is the symbol for your method
callMethod(bar); // etc

At a high level. In your instance, though, you're asking to use that symbol as just a variable in your selector:

function callMethod(elementPrefix)
{
    $('#' + elementPrefix+ '_elem').toggle(true).attr('required', true);
    alert('This is ' + elementPrefix);
}

If you want to use it both as a string value, and the method name, you can eval the symbol to get the method:

var methodName = 'foo';
var text = 'This is ' + methodName; // This is foo
var method = eval('(' + methodName + ')');
method(); // calls foo()

answered Apr 7, 2011 at 15:19

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

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

Comments

casablanca · Accepted Answer · 2011-04-07 15:19:06Z

4

I'm not sure if I understood your question fully, but do you want to dynamically create a function based on some arguments? If so, you could do something like this:

function make_func(x) {
  return function() {
    $("#"+x+"_elem").toggle(true).attr('required', true);
    alert('This is '+x);
  };
}

Then make_func('foo') would return a function which is equivalent to the function foo in your original example.

answered Apr 7, 2011 at 15:19

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

Collectives™ on Stack Overflow

jquery dynamic function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related