Append an element with onclick parameter

Question

I'm appending HTML elements with clickevents via jQuery. The creation must be able to give these clickevents variables, I end up in

NOT DEFINED ERRORS.

function foo( bar ){
  // do something with bar
}; 

var bar = "lolbert";

$("#parent").append("<td onclick='foo(" + bar + ")'> Whatever </td>");

Of course, the last line ends in the element:

<td onclick='foo( lolbert )'> Whatever </td>

And the clickevent will cause a "lolbert is not defined" error. It's clear why this happens and that it doesn't work this way. However, whats the correct way to handover variables for events created by jQuerys .append() ?

" missed: $("#parent").append("<td onclick='foo('" + bar + "')> Whatever </td>"); — Armin Bleiholder
– Armin Bleiholder, Commented Jul 27, 2015 at 8:48

Jozef Legény · Accepted Answer · 2015-07-27 08:43:08Z

2

You can add the onclick handler functionally:

var bar = "foo";
$("#parent").append($('<td>Whatever</td>').click(
  function() {
    alert(bar);
  }));

answered Jul 27, 2015 at 8:43

Jozef Legény

1,1671 gold badge11 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Append an element with onclick parameter

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related