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看起来像一个字符串，因此应该用""括起来，同样你必须确保函数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>')
}

在Jquery中传递几个参数

3 个答案: