Ричард Кук заметил выше, что исходный ответ (предоставленный Константином Азизовым) перестал работать с версией 4.2.6 SweetAlert2. Он предположил, что это связано с клонированием узлов по мере их добавления в html. Я недостаточно хорошо знаю SweetAlert2, чтобы сказать, прав он или нет. Однако я мог видеть, что мои кнопки были добавлены, но функции обратного вызова onclick никогда не вызывались.
Приложив небольшие усилия, я смог заставить это работать с текущим выпуском SweetAlert2. Чтобы заставить его работать, мне пришлось назначить события onclick кнопкам на более позднем этапе. В итоге я добавил идентификаторы к кнопкам, чтобы их было легко выбирать из jQuery. Затем я добавил функцию onOpen к моему объекту swal и подключил логику, чтобы связать функции обратного вызова. Ниже приведен фрагмент кода, который работает для меня.
Также обратите внимание, что сообщение и кнопки используют некоторые существующие классы SweetAlert2, поэтому они выглядят так же, как существующие элементы пользовательского интерфейса. Предостережение: я пытался использовать классы swal2-confirm и swal2-cancel. Когда я это сделал, я столкнулся с некоторыми проблемами. Возможно, код SweetAlert2 зависит от наличия только одного элемента, использующего этот класс. У меня не было времени заниматься этим, поэтому я просто перестал использовать эти классы.
function createButton(text, id) {
return $('<button class="swal2-input swal2-styled" id="'+id+'">'+text+'</button>');
}
function createMessage(text) {
return $('<div class="swal2-content" style="display: block;">'+text+'</div>');
}
function swThreeButton(msg, textOne, textTwo, textThree, callbackOne, callbackTwo, callbackThree) {
var buttonsPlus = $('<div>')
.append(createMessage(msg))
.append(createButton(textOne,'sw_butt1'))
.append(createButton(textTwo,'sw_butt2'))
.append(createButton(textThree,'sw_butt3'));
swal({
title: 'Select Option',
html: buttonsPlus,
type: 'question',
showCancelButton: false,
showConfirmButton: false,
animation: false,
customClass: "animated zoomIn",
onOpen: function (dObj) {
$('#sw_butt1').on('click',function () {
swal.close();
callbackOne();
});
$('#sw_butt2').on('click',function () {
swal.close();
callbackTwo();
});
$('#sw_butt3').on('click',function () {
swal.close();
callbackThree();
});
}
});
};
person
KW402
schedule
21.06.2019
