使用jQuery動態創建onClick事件處理程序

Question

我有以下代碼從稱為“數據”的數組構建表。 我想將javascript調用添加到另一個名為backend_getMovieData的方法中，但是我不知道如何從movie._id構建字符串。 我從示例代碼中收到錯誤“未捕獲的SyntaxError：意外的令牌}”。

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

Answer 1

我認為您的函數需要一個字符串。

做這個：

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

您需要用引號將其包裝。

Answer 2

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