Question

I have an object that defines the name and parameters of a function to be called in the click event of a page element.

object_array = [
    {
       id: "id1",
       onclick: "load_file(filename.php);",
    },

    {
       id: "id2",
       onclick: "open_url('http://url.com');",
    }
];

That information must be retrieved dynamically. I’d like in the click event to call the onclick function for a given object in the array.

$('element').click(function() {
      // call object.onclick
});

Seems that eval() is not a good choice. Is there a different way of calling that function?

Answer 1

You should refactor the object_array to:

[{
    id: "id1",
    action: "load_file",
    url: "filename.php"
}, {
   id: "id2",
   action: "open_url",
   url: 'http://url.com'
}];

Then you can call it with:

var actions = {
    load_file: function(url) {
        ...
    },
    open_url: function(url) {
        ...
    },
    ...
};
object_array.forEach(function(ob) {
    $("#"+ob.id).click(function() {
        actions[ob.action](ob.url);
    });
});

If you have more complex arguments, you could also deliver an arguments array instead of url and use apply() on the function.

---

Or, if you just want a lookup-table of functions, use:

var object = {
    "id1": function() {
        load_file('filename.php');
    },
    "id2": function() {
        open_url('http://url.com');
    }
};
$('element').click(function() {
    object[this.id]();
});