jQuery内联html onclick事件无法正常工作

Question

我遇到了jQuery $ onclick事件

的问题

onclick我的意思是：

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

但由于某种原因，回调不是"calling"

这是一些示例代码(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>

请注意，演示中唯一重要的是javascript，它会产生以下错误：

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

任何帮助？

Answer 1

问题是因为您使用了onclick事件属性。这意味着所调用的函数必须在window的范围内可用 - 您的callback函数不是。{/ p>

要解决此问题，请不要使用on*事件属性，除非实际上没有其他选择。您可以在创建元素的位置附加click事件：

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

或者，您可以对所有当前和未来元素使用单个委托事件：

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将你的callback（）方法放在$ add.click之外，在你的情况下，callback（）方法的范围将限于$ add.click，这就是为什么onclick显示引用错误

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>

Answer 3

这是有效的，但您需要定义＆＃39; privateData＆＃39;

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