将回调函数附加到动态创建的按钮 [JS]

Question

所以，我有这个功能：

create({
  text: 'Confirm',
  callback: function(){
    location.reload();
  }
});

function create(options){
   $('div').append('<button>'+options.text+'</button>');
}

我希望，当您单击按钮时，我传递的回调函数会被执行。我怎样才能做到这一点？该函数可以是匿名函数还是我必须命名它？例如，我可以命名它，然后将附加代码的行更改为：

$('div').append('<button onclick="'+options.callbackName+'()">'+options.text+'</button>');

然后创建一个具有该名称的函数，而不是传递一个函数，而是传递一个带有该名称的字符串，但我更喜欢第一个选项。

Answer 1

创建您的 jQuery 元素并将其分配给一个变量，然后使用 jQueryon方法将您的回调绑定到给定的函数：

function create(options) {
  let button = $(`<button>${options.text}</button>`);
  button.on('click', options.callback);
  $('#container').append(button);
}

function append() {
  create({
  text: 'Confirm',
  callback: function() {
    //location.reload();
    alert('Hello World');
  }
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>