时间戳

首页 > 解决方案 > 在 onclick 中传递动态对象 - JavaScript/jQuery

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

问题描述

我想在onclickjQuery 中传递一个动态对象。请检查下面的片段，其中我将对象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>

标签： javascriptjqueryhtmldom

解决方案

尝试使用 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>

推荐阅读