jquery - 在 Jquery 中传递几个参数

Question

for (var i=0; i<data.length; i++){
    $("#menu").append("<button onclick='select_food("+data[i]['id']+","+data[i]['name']+")'>Select</button>)")
}
function select_food(id, name){
     //do something
}

此代码存在语法错误。如何为调用 select_food 函数的每个按钮传递两个参数？
谢谢。

Answer 1

使用onclick属性是一种过时（且丑陋）的附加事件的方式。尝试使用data属性来存储您需要的信息并使用 jQuery 附加事件。像这样的东西：

$('#menu').on('click', 'button', function() {
    var id = $(this).data('id');
    var name = $(this).data('name');

    // do something...
});

for (var i = 0; i < data.length; i++){
    $("#menu").append('<button data-id="' + data[i]['id'] + '" data-name="' + data[i]['name'] + '">Select</button>')
}

Answer 2

由于参数name看起来像一个字符串，它应该用 in 括起来""，因此您还必须确保该函数select_food在全局范围内可用

for (var i=0; i<data.length; i++){
    $("#menu").append('<button onclick="select_food("' + data[i]['id'] + '","' +data[i]['name'] + '")>Select</button>)')
}
function select_food(id, name){
     //do something
}

Answer 3

这是一个可能的解决方案（参见这里的小提琴http://jsfiddle.net/gDNTw/2/）：

$('#menu').on('click', 'button', function() 
{
    var id = this.id;
    var name = this.name;

    alert(id + ':'  + name);
    // do something...
});

for (var i = 0; i < data.length; i++)
{
    $("#menu").append('<button id="' + i + '" name="' + data[i] + '">Select</button>')
}