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函数则不可用。

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

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

另外，您可以在所有当前和将来的元素上使用单个委托事件：

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

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

这是可行的，但您需要定义“ 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);
  });
});