Получение кнопки, которая открыла модал (НЕ с тегом data- * html) - PullRequest
0 голосов
/ 12 сентября 2018

У меня есть модальный бутстрап, который открывается по щелчку двумя разными кнопками. если заданное условие выполнено для момента:

$('#buttonName').on('click', function (e) {
     var arg = something;
     if (condition) {
     $('#modalName').modal('show');
     } else { someFunction(arg); }
});

$('#otherButton').on('click', function (e) {
     var arg = something;
     if (condition) {
     $('#modalName').modal('show');
     } else { someFunction(arg); }
});

Здесь нельзя использовать атрибут данных HTML. Так что-то вроде этого:

<button id="buttonName" class="modalBtn" data-toggle="modal" data-target="#modalName" data-caller="button1"></button>

не будет работать, потому что , если оператор из on.click , событие тогда пропущено, и модальное открыто независимо от условия, которое я не хочу.

Модал содержит кнопку

<div id="logoutBoxModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="true" keyboard:="true">
    <div id="" class="modal-content">                   
        <button id="modalButton"></button>
    </div>
</div>

, который должен был что-то делать, основываясь на том, какая из двух кнопок открыла его.

Я пробовал это:

//$('#myModal') alternatively
$('.modal').on('show.bs.modal', function (e) {
    var $trigger = e.relatedTarget;
    console.log($trigger);
});

но всегда возвращает undefined .

Все ответы, которые я мог найти, связаны с использованием атрибута данных, который нельзя использовать здесь.

Подводя итог, все, что мне нужно, это как передать значение модалу, чтобы он мог сказать кнопке, что он должен делать, и все это должно быть сделано с помощью javascript / jquery.

Спасибо

ОБНОВЛЕНИЕ - Ответ

Возвращено $trigger Переменная - это Javascript, а не jQuery, и к ее данным можно получить доступ с помощью Javascript:

<button id="buttonName" class="modalBtn" data-caller="button1"></button>

 var $trigger = e.relatedTarget.target;
 var data = $trigger.dataset.caller;
 console.log(data);

в противоположность jQuery:

...
var data = $trigger.data("caller");
console.log(data);

1 Ответ

0 голосов
/ 12 сентября 2018

Когда вы вызываете $('#modalName').modal('show');, передайте второй аргумент.

Пример:

$('#modalName').modal('show', {target: e.target});

e.relatedTarget теперь должен быть объектом с целью, назначенной для e.target (или что бы вы не выбрали).

Редактировать (по комментариям):

$('#buttonName').on('click', function (e) {
    var arg = something;
    if (condition) {
        // Pass target in click-event handler
        $('#modalName').modal('show', {target: e.target});
    } else {
        someFunction(arg);
    }
});

$('.modal').on('show.bs.modal', function (e) {
    var $trigger = e.relatedTarget.target;
    console.log($trigger);
});
...