如何指定“点击”按钮？函数通过数组中对象的属性？

Question

我有一个对象数组，我正在循环创建DOM元素。我定义的对象有几个我希望传递给生成的DOM元素的属性，包括函数“onclick_fn”，因此每个结果都可以根据需要处理该事件。

除了传递函数外，一切正常。我已经尝试了很多东西，我无法弄清楚这一点。该函数不会持久存在，并且在事件需要时会“未定义”。

我创建了一个JSFiddle来说明问题。

function run_me() {
    console.log("make_array");
    add_divs(make_array());
}

function make_array() {
    var my_array = [];
    my_first_obj = {
        name: "ClickTheFirstOne",
        age: 24,
        callback_fn: function(div) {
            $(this).append("clicked first");
        }
    };
    my_array.push(my_first_obj);

    my_next_obj = {
        name: "ClickTheSecondOne",
        age: 42,
        callback_fn: function(div) {
            $(this).append("clicked second");
        }
    };
    my_array.push(my_next_obj);
    return my_array;
}

function add_divs(my_array)
{
    for (var i = 0; i < my_array.length ; i++) {
        var new_div = document.createElement("div");
        $(new_div).append("<div>" + my_array[i].name + ", " + my_array[i].age + "</div>");
        $(new_div).click( function() { my_array[i].callback_fn(this); } );
        $("#my_div").append(new_div);
    }
}