使用 jQuery 动态创建 onClick 事件处理程序

Dynamically create a onClick event handler with jQuery

本文关键字：事件处理 程序 onClick 创建 jQuery 动态 使用      更新时间：2023-09-26

我有以下代码，它从名为"data"的数组构建了一个表。我想将 javascript 调用添加到我的另一个名为 backend_getMovieData 的方法中，但我不知道如何从movie._id构建字符串。我从示例代码中收到错误"未捕获的语法错误：意外的令牌}"。 

data.forEach(function(movie) {
    $("#shows").find('tbody')
           .append($('<tr>') 
           .append($('<td>' + movie._id + '</td>'))
           .append($('<td>' + movie.total + ' times</td>'))
           .append($('<td><button class=''btn btn-success'' onClick=backend_getMovieData(' + movie._id + ');>Show times</button></td>'))); 
});

我认为，您的函数需要一个字符串。

这样做：

data.forEach(function(movie) {
    $("#shows").find('tbody')
           .append($('<tr>') <br />
           .append($('<td>' + movie._id + '</td>'))<br />
           .append($('<td>' + movie.total + ' times</td>'))<br />
           .append($('<td><button class=''btn btn-success'' onClick="backend_getMovieData(''' + movie._id + ''')";>Show times</button></td>'))); 
});

您需要用引号包装它。

JQuery 可以更巧妙地完成它：

$("#shows").on('click', 'button.btn-success', function() { backend_getMovieData(this.id) });
data.forEach(function(movie) {
    $("#shows").find('tbody')
       .append($('<tr>') <br />
       .append($('<td>' + movie._id + '</td>'))<br />
       .append($('<td>' + movie.total + ' times</td>'))<br />
       .append($('<td><button class="btn btn-success" id="' + movie._id + '">Show times</button></td>'))); 
});
相关文章：