1

I found similar questions while searching for a solution for my problem but I don't think its quite that what I'm looking for.

Using jQuery's .on() is no brainer for binding events on dynamically created elements, but I got stuck while trying to pass different parameters to call different functions. After reading https://developer.mozilla.org/en/JavaScript/Guide/Closures I came up with the following working example, but I would like to know if its the best way to do it or if there is a more elegant solution?

http://jsfiddle.net/V25Zc/

Plus I often read that using eval() isn't a best practice due to vulnerability issues but is there another way to build dynamic function names?

Edit:

Thanks a lot for everyone for the great answers! Did one of the answers got deleted though? I liked that one because of the hint to store the parameter in an attribute. Thanks again all!

Improve this question

5 Answers 5

Reset to default
3

The point of event delegation is that you don't need to bind an event to every single element (or to the same element multiple times), just once to the common parent, like so:

function createLinks() {

    var $container = $("#container"),
        links = "";



    for (var i=0; i < 4; i++) {
        links += '<a class="linklink" href="#">Link_' + i + '</a>';
    }

    $container.html(links).on( "click", ".linklink", function(){
        console.log( "fn action"+$(this).index());
    });
}

createLinks();

To avoid using eval, you could have an array of functions and call them by index:

arrayOfFunctions[ $(this).index() ]();

http://jsfiddle.net/V25Zc/2/

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

3 Comments

+1 - this is the correct answer. I'd throw a data-foo attribute to store i, but whatever
@AdamRackis yeah I did this way out of pure laziness
@Esailija Many thanks for this solution because this way, the loop is completely clean (no functions inside). Plus not even an helper function is needed! :)
2

If each action function actually has to be a different function (rather than one function that acts different based on the index passed to it), then I'd do it this way by putting an attribute on the link and fetching it upon click which you can see it work here: http://jsfiddle.net/jfriend00/gFmvG/.

function action0(){ console.log("fn action0"); }
function action1(){ console.log("fn action1"); }
function action2(){ console.log("fn action2"); }
function action3(){ console.log("fn action3"); }

var actions = [action0, action1, action2, action3];

function createLinks() {

    var $container = $("#container"),
        links = "";

    for (var i=0; i < 4; i++) {
        links += '<a id="link_' + i + '" href="#" data-num="' + i + '">Link_' + i + '</a>';
        $container.on("click", '"#link_' + i + '"', function() {
            actions[$(this).data("num")]();
        });
    }

    $container.html(links);
}

createLinks();

If you don't have to have separate functions for each action, I'd do it like this which you can see here: http://jsfiddle.net/jfriend00/Z8Rq6/.

function doAction(index) {
    console.log("fn action" + index);
}

function createLinks() {

    var $container = $("#container"),
        links = "";

    for (var i=0; i < 4; i++) {
        links += '<a id="link_' + i + '" href="#" data-num="' + i + '">Link_' + i + '</a>';
        $container.on("click", '"#link_' + i + '"', function() {
            doAction($(this).data("num"));
        });
    }

    $container.html(links);
}

createLinks();

This could also be done with an executing closure which locks in the index value, but I find that syntax somewhat less readable (it takes too many brain cycles to read the code and know what it's doing) so I prefer this way with the attribute.

Improve this answer

2 Comments

+1 as promised. Can you fact check my answer to make sure I'm not saying something else stupid?
@jfriend00 I upvoted this one because I really like the idea with fetching the attribute. Too bad one can't accept two answers at the same time. :(
1

Put your functions in an object 

var myFuncs = {
action0:function(){ console.log("fn action0"); },
action1:function(){ console.log("fn action1"); },
action2:function(){ console.log("fn action2"); },
action3:function(){ console.log("fn action3"); }
};

var funcNumber = "3";

for (var i=0; i < 4; i++) 
{
    links += '<a id="link_' + i + '" href="#">Link_' + i + '</a>';
    (function(myI)
    {
         $container.on("click", '"#link_' + i + '"', function()
         {
              myfuncs["action"+funcNumber](mI);
         });
    })(i);
}

course if they are being made on the global scope you could also do

for (var i=0; i < 4; i++) 
{
    links += '<a id="link_' + i + '" href="#">Link_' + i + '</a>';
    (function(myI)
    {
         $container.on("click", '"#link_' + i + '"', function()
         {
              window["action"+funcNumber](mI);
         });
    })(i);
}
Improve this answer

2 Comments

Thanks a lot, this is definitely a nice way to avoid eval(). :)
added a anon closure if ur gonna be using it on a loop so that you get the proper "i" value on the callback
1

It looks like your original problem was that you wanted to call a function whose name would be determined by the parameter passed in. Are these functions all global in scope? If so, I would just do this:

function helpCallback(index) {
    return function() {
        window['action' + index]();
    }
}

This has the added advantage that, if you ever wanted to pass arguments to actionX, you do so by passing these arguments after index with the following modification

function helpCallback(index) {
    var args = arguments;
    return function() {
        window['action' + index].apply(null, [].slice.call(args, 1));
    }
}

So helpCallback(1, "foo"); would return a function that calls action1('foo')

Improve this answer

10 Comments

This will not work because the value of i will be 4 (the end of the for loop), not the value you want when helpCallback(i) is actually executed. This is a common trap people fall into when dealing with functions that will be called some time in the future. This type of problem is usually solved by creating a new closure that i is passed into at the time the for loop is executed.
@jfriend00 - did you write that comment during the 5 or so seconds that I had a bad answer up? I initially misunderstood what was going on, but I think my current answer is correct.
The issue is that helpCallback() returns a function so putting it into an anonymous function like you're doing doesn't solve anything here. I think you misunderstood what the OP is doing with helpCallback().
@jfriend00 - I see, but doesn't OP's original code work? $container.on("click", '"#link_' + i + '"', helpCallback(i)); doesn't that execute helpCallback(i) immediately?
Their original method does work. Read the question - they are asking if there's a better way.
|
0

I wouldn't personally bother with creating IDs and then referencing them. Why not use closures within bindings to actual elements you've created.

For example, you can do something like 

function createLinks() {

    var $container = $("#container");

    for (var i=0; i < 4; i++) {
        var link = $('<a href="#link' + i + '">Link_' + i + '</a>');
        $container.append(link);
        (function(){
            var index = i;
            link.click(function(){
                alert("Do my thing " + index);
            });
        })();
    }

}

createLinks();
Improve this answer

2 Comments

I don't think this will work. The alert() will always show i as 4 (the value at the end of the for loop).
Damn right, jfriend00. I missed it. Now fixed, using an anonymous function closure.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.