javascript - jQuery 内联 html onclick 事件不起作用

Question

我遇到了 jQuery $ onclick 事件的问题

通过 onclick 我的意思是:

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

但由于某种原因，回调不是“调用”

这里是一些示例代码(简化)

$(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 函数不是。

要解决这个问题，除非别无选择，否则不要使用 on* 事件属性。您可以在创建元素时附加点击事件:

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

或者，您可以对所有当前和 future 的元素使用单个委托(delegate)事件:

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