为动态创建的按钮附加回调函数[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 元素并将其分配给变量，然后使用 jQuery

on

方法将回调绑定到给定函数：

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>

Answer 2

var btn = $("<button>"+options.text+"</button>");
$("<div>").append(btn);
btn.on("click", options.callBack);

Answer 3

按照您的代码片段，您可以将其更新为：

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

function create(options){
    var $button = $("<button>");
    if ( typeof options.callback === "function" ) {

        $button.on("click", options.cb);

    }
    if ( typeof options.text === "string" ) {

        $button.text(options.text);

    }
    $('div').append($button);
    return $button;
}

您的创建函数现在将逐步执行以下操作：

• 创建一个按钮元素
• 如果 options.callback 是一个函数，则附加它
• 如果 options.text 是一个字符串，则将其设置为内部的 textNode。
• 为了方便返回创建的按钮

作为旁注，关于您的最后一句话：这意味着泄漏全局范围内的引用，因为内联回调是在全局范围内执行的。可能不是你想要的。您通常希望避免这种模式，在我看来，在全局范围内故意泄漏函数引用的唯一用例是 JSONP，但这是一个完全不同的用例:)

Answer 4

您可以将回调函数包装成立即调用的函数表达式（IIFE）：

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

create({
    text: 'Confirm',
    callback: function(){
        alert('Hello');
    }
});

这样您还可以将事件对象传递给回调：

onclick="(function(event){console.log(event.target)})(event)"

Answer 5

 function append(){
        var btn = $('<button>Button</button>');
        $(btn).click(function(){
        alert('Text');
        })
        btn.appendTo($("#container"));
    }

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