Передача динамического объекта в onclick - JavaScript / jQuery

Question

Я хочу передать динамический объект в onclick jQuery.Пожалуйста, проверьте приведенный ниже фрагмент, в котором я получаю значение product объекта как 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

попробуйте

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();

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

Попробуйте правильно подключить прослушиватель, используя прослушиватели событий в 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>