Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: