在onclick中传递动态对象 - JavaScript / jQuery

Question

我想在onclick jQuery中传递一个动态对象。 请检查以下代码段，其中我将对象product值undefined为undefined 。 有人可以帮助我如何在JavaScript / jQuery中传递和接收对象值吗？

 var hpc = ""; function handleProductsClick(e, product) { debugger; alert(product && JSON.stringify(product)); } function buildProducts(products) { var bp = ''; hpc = handleProductsClick.bind(products[i]); for (var i = 0; i < products.length; i++) { bp += '<li onclick="hpc(event)">' + products[i].value + '</li>'; } $("#products").html(bp); } function getProductsFromApi() { var products = [{ key: 1, value: "Apple" }, { key: 2, value: "Android" } ]; buildProducts(products); } getProductsFromApi(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="products"></ul> 

Answer 1

尝试使用Javascript中的事件侦听器而不是内联HTML属性（这与eval一样糟糕）正确附加侦听器。 另外，当你使用bind ，第一个参数是提供给函数的this值; .bind的第二个参数对应于另一个函数中的第一个参数。

 function handleProductsClick(product) { console.log(product && JSON.stringify(product)); } function buildProducts(products) { products.forEach(product => { const li = $('<li>' + product.value + '</li>'); li.on('click', handleProductsClick.bind(null, product)); $("#products").append(li) }); } function getProductsFromApi() { var products = [{ key: 1, value: "Apple" }, { key: 2, value: "Android" } ]; buildProducts(products); } getProductsFromApi(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="products"></ul> 

Answer 2

最好避免使用内联onclick ，并尝试将事件附加到li或公共类，n使用data-* attributes来传递所需的信息：

 $(function() { $('body').on('click', '.my_item', function() { console.log($(this).data('product')); }); }); function buildProducts(products) { for (var i = 0; i < products.length; i++) { $("#products").append("<li class='my_item' data-product='" + JSON.stringify(products[i]) + "'>" + products[i].value + "</li>"); } } function getProductsFromApi() { var products = [{ key: 1, value: "Apple" }, { key: 2, value: "Android" } ]; buildProducts(products); } getProductsFromApi(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="products"></ul> 

Answer 3

尝试这个

var hpc = "";

function handleProductsClick(e, product) {
  debugger;
  alert(product && JSON.stringify(product));
}

function buildProducts(products) {
  var bp = '';
  hpc = handleProductsClick.bind(products[i]);
  for (var i = 0; i < products.length; i++) {
    bp += '<li onclick="hpc(event)">' + products[i].value + '</li>';
  }
  $("#products").html(bp);
}

function getProductsFromApi() {
  var products = [{
      key: 1,
      value: "Apple"
    },
    {
      key: 2,
      value: "Android"
    }
  ];
  buildProducts(products);
}

getProductsFromApi();