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方法将你的回调绑定到给定的函数：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以将回调函数包装到一个立即调用的函数表达式（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 4

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

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。
返回创建的按钮

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

Answer 5

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: