Pass dynamic object in onclick - JavaScript/jQuery

Question

I want to pass a dynamic object in onclick jQuery. Please check the below snippet in which I am getting object product value as undefined. Can someone help me on how to pass and receive object value in 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>

hpc = handleProductsClick.bind(products[i]); in this line i is undefined — Niladri
– Niladri, Commented May 28, 2018 at 10:25

CertainPerformance · Accepted Answer · 2018-05-28 10:29:17Z

3

Try attaching the listener properly using event listeners in Javascript rather than inline HTML attributes (which is as bad as eval). Also, when you use bind, the first argument is the this value provided to the function; the second argument to .bind corresponds to the first argument in the other function.

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>

answered May 28, 2018 at 10:29

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abraham Gnanasingh Over a year ago

Is there a way we can use html() instead of append()?

CertainPerformance Over a year ago

No, because html only sets an HTML string, not an actual element. (strings can't have listeners attached to them; elements can.) Definitely use append.

Abraham Gnanasingh Over a year ago

Ok. But is there any performance issue if I use append instead of html?

CertainPerformance Over a year ago

No performance issue, performance is almost never something worth worrying about anyway

Zakaria Acharki · Accepted Answer · 2018-05-28 10:52:05Z

It will be better to avoid the use of inline onclick, and try to attach the event to the li or to common classes, the n use data-* attributes to pass the information you want :

$(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>

kalai · Accepted Answer · 2018-05-28 10:36:42Z

0

try this

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

answered May 28, 2018 at 10:36

kalai

18612 bronze badges

Collectives™ on Stack Overflow

Pass dynamic object in onclick - JavaScript/jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related