javascript - 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,console,output

<小时/>

回复评论:

你总是得到最后一个值，因为你没有使用闭包。这是使用闭包更新的(非工作)示例:

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)
        );

}

我还没有测试过它，但我认为它应该有效。