Итак, у меня есть эта функция:

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

А затем создайте функцию с этим именем и вместо передачи функции передайте строку с именем, но я бы предпочел первый вариант.

1
nick 27 Авг 2017 в 22:25

5 ответов

Лучший ответ

Создайте свой элемент 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>
4
quirimmo 27 Авг 2017 в 19:38
 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>
1
vicky patel 28 Авг 2017 в 10:42

Вы можете обернуть функцию обратного вызова в выражение функции, вызываемой немедленно (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)"
1
Benni 27 Авг 2017 в 19:57

Следуя вашему фрагменту кода, вы можете обновить его до:

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, но это совершенно другой вариант использования :)

1
adz5A 27 Авг 2017 в 19:50
var btn = $("<button>"+options.text+"</button>");
$("<div>").append(btn);
btn.on("click", options.callBack);
1
Stephen Thomas 27 Авг 2017 в 19:38