Делегирование событий - это программный шаблон, который позволяет нам прослушивать события для нескольких (неограниченное количество) целевых тегов (например, buttons, inputs и т. Д.). c.) Путем привязки (или регистрового) события к одному тегу, который все целевые теги имеют в качестве предка. Я называю его «общим предком» - window, document и body всегда действительны, но в большинстве случаев это не лучший выбор.
Помимо наличия только одного обработчика событий в стеке вызовов, любой целевой тег, динамически добавляемый на страницу после его загрузки, будет реагировать на зарегистрированные инициированные события - нет способа привязать события к тегам, созданным после загрузки страницы. .
jQuery .on() метод делегирует события, когда предоставляется фактический селектор:
$('.btn-group').on('click',...
.btn-group - это тег (общий предок), связанный с события (ы) и будет прослушивать эти события при запуске на любом из его тегов-потомков (целевых тегов). Существует множество способов сослаться на .btn-group в обработчике:
$('.btn-group')
this // Used with plain JavaScript properties and methods
$(this)[0] // As above
$(this).get() // As above
event.currentTarget // As above*
$(this) // Used with jQuery properties and methods
$(event.currentTarget) // As above*
*event.currentTarget всегда будет ссылаться тег привязан к событию, но это не всегда верно для this. Если второй параметр, называемый event.data, определен как селектор, то this будет ссылаться на event.data.
$('.btn-group').on('click', '.btn-modal', openModal);
$(.btn-modal) и теперь $(this), а не $('.btn-group'). Любой тег-потомок $('.btn-group'), по которому щелкают, вызывает событие click, вызывая функцию обработчика openModal(). Именно обработчик будет определять, какой тег инициирует поведение или игнорируется. На теги, которые являются триггерами при нажатии, можно ссылаться следующим образом:
Источник события - Тег, на который пользователь щелкнул, изменил, наведен курсор и т. Д. c.
event.target // Used with plain JavaScript properties and methods
this // As above if `event.data` is defined
$(this)[0] // As above
$(this).get() // As above
$(event.target) // Used with jQuery properties and methods
$(this) // As above if `event.data` is defined
event.target всегда будет ссылаться на тег, с которым пользователь взаимодействовал (например, нажал).
Демо
Примечание : Подробности прокомментированы в демоверсии
/*
If there are multiple tags to target
ex. 3 button.btn-modal
Determine the closest parent tag that the target tags have in common.
ex. fieldset.btn-group
Delegate the event to the "common ancestor". Add the handler function
(ie `openModal()`) without the parenthesis.
ex. $('.btn-group').on('click', openModal);
*/
$('.btn-group').on('click', openModal);
/*
Pass thru the event object
Use the event object property .target to determine which tag the user clicked.
Make it into a jQuery object by wrapping it into $(...)
ex. let clicked = $(event.target);
If the clicked tag has a .btn-modal class...
ex. if (clicked.hasClass('btn-modal')) {...
...get the clicked tag data-open value...
ex. let ID = clicked.data('open');
...Finally, use previous value, ID, as a reference to a modal using the Bootstrap
method .modal() to open said modal.*
ex. $('#'+ID).modal();
*/
function openModal(event) {
let clicked = $(event.target);
if (clicked.hasClass('btn-modal')) {
let ID = clicked.data('open');
$('#' + ID).modal();
}
return false;
}
/*
*Note: Patterns involving .btn-modal classes and data-open attributes
are of my own design
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<main class="container">
<section class='row'>
<fieldset class='btn-group btn-group-lg mx-auto mt-5'>
<button class="btn btn-primary btn-modal" data-open="noticeA" type="button">
Notice A
</button>
<button class="btn btn-warning btn-modal" data-open="noticeB" type="button">
Notice B
</button>
<button class="btn btn-danger btn-modal" data-open="noticeC" type="button">
Notice C
</button>
</fieldset>
<dialog id="noticeA" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<header class="modal-header bg-primary">
<h4 class="modal-title text-white">Notice A</h4>
<button class="close" type="button" data-dismiss="modal">
×
</button>
</header>
<article class="modal-body">
<p class='display-1 text-center'>HEY!</p>
</article>
<footer class="modal-footer">
<button class="close btn btn-primary p-3" type="button" data-dismiss="modal">
Close
</button>
</footer>
</div>
</div>
</dialog>
<dialog id="noticeB" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<header class="modal-header bg-warning">
<h4 class="modal-title">Notice B</h4>
<button class="close" type="button" data-dismiss="modal">
×
</button>
</header>
<article class="modal-body">
<p class='display-1 text-center'>HEY!</p>
</article>
<footer class="modal-footer">
<button class="close btn btn-warning p-3" type="button" data-dismiss="modal">
Close
</button>
</footer>
</div>
</div>
</dialog>
<dialog id="noticeC" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-lx">
<div class="modal-content">
<header class="modal-header bg-danger">
<h4 class="modal-title text-white">Notice C</h4>
<button class="close" type="button" data-dismiss="modal">
×
</button>
</header>
<article class="modal-body">
<p class='display-1 text-center'>HEY!</p>
</article>
<footer class="modal-footer">
<button class="close btn btn-danger p-3" type="button" data-dismiss="modal">
Close
</button>
</footer>
</div>
</div>
</dialog>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0
/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
</body>
</html>