Onclick在Firefox中不起作用，但在Chrome中-是

Question

考虑以下代码...

function getItems(id, menu_id) {
    //some code
}  

$('#group-api').append('<li><a href="#" onclick="getItems(\''+data['group'][i]['id']+'\',\''+menu_id+'\');" role="tab" data-toggle="tab">'+data['group'][i]['menu_group']+'</a></li>');

如果我使用Chrome，但不适用于Firefox，则此方法有效。 有什么办法吗？ 谢谢。

Answer 1

尝试相反的方法。 通过jQuery创建元素，在其上附加.click()事件， 然后将其附加到容器。

码：

function getItems(id, menu_id) {
    // ...
}

$("<li><a href='#' role='tab' data-toggle='tab'>" + data['group'][i]['menu_group'] + "</a></li>")
    .appendTo("#group-api")
    .find("a")
    .click(function() {
        getItems(data['group'][i]['id'], menu_id);
    });

JSbin模型： http ://jsbin.com/dosohatawe/1/edit?js，控制台，输出

---

回复评论：

您总是得到最后一个值，因为您没有使用闭包。 这是使用闭包更新的您的（无效）示例：

for(var i = 0; i < data['group'].length; i++) {

    var id = data['group'][i]['id'];

    $("<li><a href='#' role='tab' data-toggle='tab'>" + data['group'][i]['menu_group'] + "</a></li>")
        .appendTo("#group-api")
        .find("a")
        .click(
            (function(a, b) {
                return function() {
                    getItems(a, b);
                };
            })(id, menu_id)
        );

}

我还没有测试过，但是我认为它应该可以工作。