Jquery 事件处理程序中的字符串插值不工作

Question

我已经在 SO 和 Internet 上进行了全面搜索，但找不到解决此问题的可行解决方案。本质上，我有一个 JSON .get 请求返回一个 Ruby 对象数组。然后我遍历这些对象并将它们放在 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>

Jquery 事件处理程序中的字符串插值不工作

String Interpolation on Jquery Event Handler Not Working

javascript

ruby

iteration

jquery

string-interpolation