GOOGLE ADS

воскресенье, 24 апреля 2022 г.

Событие jQuery для запуска действия, когда div становится видимым

Я использую jQuery на своем сайте и хочу запускать определенные действия, когда определенный элемент div становится видимым.

Можно ли прикрепить какой-то «видимый» обработчик событий к произвольным div и запустить определенный код, когда div станет видимым?

Я хотел бы что-то вроде следующего псевдокода:

$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});

Код предупреждения («сделай что-нибудь») не должен срабатывать до тех пор, пока contentDiv не станет видимым.

Спасибо.


Решение проблемы

Проблема решается наблюдателями мутаций DOM. Они позволяют привязать наблюдателя (функцию) к событиям изменения содержимого, текста или атрибутов элементов dom.

С выпуском IE11 все основные браузеры поддерживают эту функцию, см. http://caniuse.com/mutationobserver.

Пример кода выглядит следующим образом:


$(function() {
$('#show').click(function() {
$('#testdiv').show();
});
var observer = new MutationObserver(function(mutations) {
alert('Attributes changed!');
});
var target = document.querySelector('#testdiv');
observer.observe(target, {
attributes: true
});
});

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...