Отслеживание DOM (observer)

@Maguark · Регистрация: 24.10.2013

Студворк — интернет-сервис помощи студентам

Добрый день.

У меня есть див "custom-row" в котором находится кнопка с классом "btn-more" при нажатие на которую отображается содержимое дива "project_box_detail"

HTML5
1
2
3
4
5
6
<div class="project_box custom-row">
    <div class="custom-col"><button class="btn btn-primary btn-more">Состав</button></div>
    <div class="project_box_detail" style="display: none;">
        <div class="project_box custom-row"></div>
    </div>
</div>

Таких комбинаций на странице много и для обработки у меня есть скрипт:

Java
1
2
3
4
5
6
7
8
9
10
$('.project_box').on('click','.btn-more',function () {
            var parent =  $(this).parents('.project_box');
            parent.toggleClass('open');
            if( parent.hasClass('open')){
                parent.find('.project_box_detail').slideDown();
 
            } else {
                parent.find('.project_box_detail').slideUp();
            }
        });

До этого момента всё пока работает.
Дальше я создаю tabs используя jquery:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id='tabs'>
    <ul>
        <li><a href='#tabs-1'>В работе</a></li>
        <li><a href='[~9~]?snabtabs=2'>Запросы</a></li>
        <li><a href='#tabs-3'>Счета</a></li>
    </ul>
    <div id='tabs-1'>
        $work
    </div>
    <div id='tabs-3'>
        $schet_tab
    </div>
</div>

В 1 и 3 закладке в переменных "$work" и "$schet_tab" у меня как раз содержаться дивы "custom-row" и загружаются они вместе со страницей попадая соответственно в дом.
Данные во 2й закладке подгружаются динамически при переходе на неё и соответственно в дом не попадают.
Для этого я слежу за изменением в этой закладке и обновляю скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        $('.project_box').on('click','.btn-more',function () {
            var parent =  $(this).parents('.project_box');
            parent.toggleClass('open');
            if( parent.hasClass('open')){
                parent.find('.project_box_detail').slideDown();
 
            } else {
                parent.find('.project_box_detail').slideUp();
            }
        });
    });    
});
var configm = {childList: true}
$(document).ready(function () {
    var targettab2 = document.querySelector('#ui-id-3');
    observer.observe(targettab2, configm);
});

Элемент с ID "ui-id-3" это и есть 2я закладка этот див jquery создаёт то-же динамически, по этому я в начале отслеживаю его создание, потом обновляю через observer скрипт.
И тут у меня всё работает) при переходе на 2ю закладку скрипт цепляется к подгруженным данным и прекрасно работает. Но беда начинается с 1 и 3 закладками.
Каждый раз как я захожу на 2ю закладку этот скрипт цепляется к уже входящим в дом элементам и дублируется.

Добавлено через 22 минуты
Получается, что перейдя с 1й вкладки на вторую и обратно. Нажав на кнопку с классом "btn-more" див "project_box_detail" в место того что-бы просто показаться, в начале покажется, а потом опять спрячется и т.д. если еще раз перейти на 2ю закладку, то скрип на одно нажатие сработает 3 раза.

@kidASM · 09.01.2020, 16:35

Просто как пример

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                background-color: #ffffff;
            }
            .wrapper {
                display: block;
                margin: 0px auto;
                padding: 10px;
                width: 800px;
                height: 600px;  
                background-color: #cdcdcd;
                border: 1px solid #666666;
            }
            .menu {
                display: block;
                text-align: center;
                width: 100%;
                margin-bottom: 10px;
            }
            .btn {
                display: inline-block;
                background-color: #ededed;
                width: 24%;
                padding: 5px;   
                box-sizing: border-box;
                cursor: pointer;
            }
            .tabs {
                display: block;
                width: 100%;
                height: calc(600px - 40px);
                background-color: #ededed;
            }
            .tab {
                display: block;
                background-color: #ededed;
                width: 100%;
                height: 100%;
                text-align: center;
                font-size: 300px;
                line-height: 540px;
            }
            .show {
                display: block;
            }
            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="menu">
                <div class="btn" data-menu="0">Menu 1</div>
                <div class="btn" data-menu="1">Menu 2</div>
                <div class="btn" data-menu="2">Menu 3</div>
                <div class="btn" data-menu="3">Menu 4</div>
            </div>
            <div class="tabs">
                <div class="tab show" data-tab="0">1</div>
            </div>
        </div>
        <script>
            var menu = document.querySelector('.menu');
            var tabs = document.querySelectorAll('.tab');
            if(menu){
                menu.addEventListener('click', function(event){
                    if(event.target.className == 'btn'){
                        var clickedMenu = parseInt(event.target.getAttribute('data-menu'), 10);
                        isExistTab(clickedMenu);
                        for(var i=0; i<tabs.length; i++){
                            if(parseInt(tabs[i].getAttribute('data-tab'), 10) == clickedMenu){
                                tabs[i].className = "tab show";
                            }
                            else{
                                tabs[i].className = "tab hide";
                            }
                        }
                    }
                });
            }
            function isExistTab(menuNum){
                var existTab = false;
                for(var i=0; i<tabs.length; i++){
                    if(parseInt(tabs[i].getAttribute('data-tab'), 10) == menuNum){
                        existTab = true;
                        break;
                    }
                }
                if(!existTab){
                    // Тут можно отправить AJAX-запрос на сервер
                    var div = document.createElement('div');
                    div.className = 'tab hide';
                    div.setAttribute('data-tab', menuNum);
                    div.textContent = menuNum+1;
                    console.log(tabs[0]);
                    tabs[0].parentNode.appendChild(div);
                    tabs = document.querySelectorAll('.tab');
                }
            }
        </script>
    </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .