jQuery inline html onclick event not working

Question

I am having trouble with the jQuery $ onclick event

by onclick i mean:

const $trigger = $('<button class="button primary" onclick="callback()">');

but for some reason, the callback is not "calling"

here is some example code (simplified)

$(function() {
  const $add = $('.add-item');
  const $container = $('.container');
  
  $add.click(() => {
    function callback() { // here is the error (not defined)
      console.log(privateData); // but obviously this is defined...
    }
  
    const $item = $(`<li class="button" onclick="callback()">Click Me</li>`);
    
    $container.append($item);
  });
});

* {
  box-sizing: border-box;
  font-family: Roboto;
}

ul, li {
  margin: 0;
  padding: 0;
}

ul {
  margin-top: 20px;
}

body, html {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.button {
  list-style: none;
  padding: 10px 20px;
  background: #2980b9;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}

.button.primary {
  background: #c0392b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="button primary add-item">Add Item</a>
  <ul class="container"></ul>
</div>

note that the only thing in the demo that matters is the javascript, which produces the following error:

{
  "message": "Uncaught ReferenceError: callback is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 1,
  "colno": 1
}

any helpz?

Rory McCrossan · Accepted Answer · 2017-10-16 10:19:40Z

3

The issue is because you're using a onclick event attribute. This means that the function called must be available from within the scope of the window - which your callback function is not.

To solve this problem, don't use on* event attributes unless there is literally no alternative. You can attach the click event at the point the element is created instead:

const $item = $(`<li class="button">Click Me</li>`).on('click', callback);

Alternatively you can use a single delegated event on all current and future elements:

$(function() {
  const $add = $('.add-item');
  const $container = $('.container').on('click', 'li.button', callback);
  
  function callback() { // here is the error (not defined)
    var privateData = 'foo';
    console.log(privateData); // but obviously this is defined...
  }

  $add.click(() => {
    const $item = $(`<li class="button">Click Me</li>`);
    $container.append($item);
  });
});

* {
  box-sizing: border-box;
  font-family: Roboto;
}

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  margin-top: 20px;
}

body,
html {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.button {
  list-style: none;
  padding: 10px 20px;
  background: #2980b9;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}

.button.primary {
  background: #c0392b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="button primary add-item">Add Item</a>
  <ul class="container"></ul>
</div>

answered Oct 16, 2017 at 10:19

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

notrota Over a year ago

Thanks, worked, I will accept as soon as it lets me :)

Vj- Over a year ago

how would this be changed if my callback function had arguments?

Rory McCrossan Over a year ago

In that case you'd need to wrap the call in an anonymous function: .on('click', 'li.button', function() { callback('arg1', 'arg2'); });

Dhaval Pankhaniya · Accepted Answer · 2017-10-16 10:24:34Z

just put your callback() method outside of $add.click, in your case the scope of callback() method is going to be limited to $add.click that's why onclick is showing reference error

function callback() { // here is the error (not defined)
  console.log("calling callback() method"); // but obviously this is defined...
}
$(function() {
  const $add = $('.add-item');
  const $container = $('.container');
  
  $add.click(() => {
    callback();
  
    const $item = $(`<li class="button" onclick="callback()">Click Me</li>`);
    
    $container.append($item);
  });
});

* {
  box-sizing: border-box;
  font-family: Roboto;
}

ul, li {
  margin: 0;
  padding: 0;
}

ul {
  margin-top: 20px;
}

body, html {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.button {
  list-style: none;
  padding: 10px 20px;
  background: #2980b9;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}

.button.primary {
  background: #c0392b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="button primary add-item">Add Item</a>
  <ul class="container"></ul>
</div>

Er.Er · Accepted Answer · 2017-10-16 11:41:58Z

0

This is working but u need to define 'privateData'

function callback() { // here is the error (not defined)
      console.log(privateData); // but obviously this is defined...
    }
$(function() {
  const $add = $('.add-item');
  const $container = $('.container');

  $add.click(() => {


    const $item = $(`<li class="button" onclick="callback()">Click Me</li>`);

    $container.append($item);
  });
});

answered Oct 16, 2017 at 11:41

Er.Er

1452 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery inline html onclick event not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related