javascript - Jquery 事件处理程序上的字符串插值不起作用

Question

我在 SO 和互联网上进行了搜索，但找不到解决此问题的可行解决方案。本质上，我有一个返回 Ruby 对象数组的 JSON .get 请求。然后，我迭代这些对象并将它们放入 li 中，然后将其插入到 DOM 中。但是，我尝试将 .on click 事件处理程序附加到每个 li，尽管我尝试了该字符串，但该字符串不会插入 jquery 对象并附加事件处理程序:

function getPrevious(data) { 
   var gamesDiv = '' 
 $.get("/games", function(data) { 
data.data.forEach(function(game) { 
gamesDiv += $(`<li class="game" data-id="${game.id}"> ${game.id} ${game.attributes.state} \n </li>`).on("click", function (e) {

  alert("hello")
 }); 
   $("#games").html(gamesDiv) 
 }); 
}

当前的化身甚至没有显示在 DOM 中。在其他努力中，我已经显示了它，但仅显示为 [object object][object object] ，没有附加事件处理程序。

我已经尝试让它工作几个小时了，所以如果有人可以提供任何见解，我将非常感激!

Answer 1

你不能治疗 jQuery对象作为字符串，这是代码中显示错误的主要原因，因为您尝试连接 gameDiv与 jQuery对象。

您可以使用 Array#map 来简化此操作在每个游戏数据中，返回jQuery代表列表的实例(这还包括注册事件处理程序等)。

将游戏列表转换为 <li> 数组后jQuery实例，那么您可以替换 #games 的内容具有转换后的数组的元素。

function getPrevious(data) {
  $.get('/games', function(data) {
    var list = data.data.map(function(game) {
      return $(
        `<li class="game" data-id="${game.id}">
        ${game.id} ${game.attributes.state} \n
        </li>`
      ).on('click', function() {
        alert(JSON.stringify(game, 0, 4));
      });
    });
    $('#games').html(list);
  });
}

// This mocks the $.get function, to provide controlled result
$.get = function(route, callback) {
  return callback({
    data: [
      { id: 1, attributes: { state: 'State 1' } },
      { id: 1, attributes: { state: 'State 2' } },
      { id: 1, attributes: { state: 'State 3' } }
    ]
  });
};
// Do not include the code above in your code base

function getPrevious(data) {
  $.get('/games', function(data) {
    var list = data.data.map(function(game) {
      return $(
        `<li class="game" data-id="${game.id}">
        ${game.id} ${game.attributes.state} \n
        </li>`
      ).on('click', function() {
        alert(JSON.stringify(game, 0, 4));
      });
    });
    $('#games').html(list);
  });
}

getPrevious();

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>


<ul id="games">

</ul>