С Новым годом! Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 115

После unwrap/wrap перестает работать resize

09.12.2017, 19:09. Показов 909. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Имеется checkbox, который обернут в div с рамкой (см. рис. внизу). Ширина этого div меняется при изменении ширины браузера. При снятии галочки происходит unwrap; при установке галочки - обратно wrap этим же div'ом. Проблема в том, что после unwrap/wrap ширина div'a перестает изменяться при изменении ширины браузера. Почему это происходит и как с этим бороться?
HTML5
1
2
3
4
5
6
<!doctype html>
<html lang="ru">
    
<head>
   <title>Test unwrap/wrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(document).ready(function() {
    var $outerDiv = $('#outerDiv');
    
    $(window).resize(function() {
        $outerDiv.css('width', 0.8 * $(window).width());
    });
    
    $('#checkbox').click(function() {
        if($(this).is(':checked')) {
            $(this).prop('checked', true);
            $('#checkbox').wrap($outerDiv[0]);
         }
        else {
            $(this).prop('checked', false);
            $('#checkbox').unwrap();
        }
    });
}); // end ready
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
</head>
 
 
<body>
 
<div id="outerDiv" style="border: 1px solid; width: auto; height: 100px; margin: 0 auto;">
    <input id="checkbox" type="checkbox" checked>
</div>
 
</body> 
 
</html>
Изображения
 
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
09.12.2017, 19:09
Ответы с готовыми решениями:

Перестает работать метод css после загрузки документа
Здравствуйте, коллеги. Помогите, пожалуйста, разобраться почему перестает работать метод css после полной загрузки страницы. Имеется такой...

Перестает работать код после добавления события onclick
Здравствуйте, помогите, пожалуйста. Есть код: $(document).ready(function() { //...

Скрипт перестает работать после применения фильтра в форме
Добрый день, форумчане. В javascript очень слаб, так что сильно не пинайте, если буду называть что-то не своими именами) Столкнулся с...

4
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
09.12.2017, 21:46
Разумней было бы решить проблему с шириной с помощью стилей:
1) width: 80% при условии что родитель занимает всю ширину экрана
2) width: 80vw выставит ширину блока в 80% от ширины вьюпорта

Но если вам действительно нужно решение с использованием js, то вот рабочий исправленный вариант:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 var $outerDiv = $('#outerDiv');
 
    $(window).on('resize load', function() {
        $('#outerDiv').css('width', 0.8 * $(window).width());
    });
    
    $('#checkbox').click(function() {
        if($(this).is(':checked')) {
            $(this).wrap($outerDiv);
         }
        else {
             $(this).unwrap();
        }
    });
В обработчике на ресайз важно не передавать ссылку на outerDiv, а каждый раз выбирать его на странице. Также бонусом добавил масштабирование outerDiv при загрузке страницы, а не только резайз. Мне показалось это поведение странным)
1
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 115
09.12.2017, 22:02  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
В обработчике на ресайз важно не передавать ссылку на outerDiv, а каждый раз выбирать его на странице.
А почему ссылка перестает работать?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
09.12.2017, 22:18
Потому-что unwrap удаляет старый обработчик на outerDiv вместе с ним самим. Поэтому варианта два - либо после wrap ставить еще один обработчик на ресайз (что плохо) или в самом обработчике ресайза делать выборку, как в моем варианте
0
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 115
10.12.2017, 12:43  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
Потому-что unwrap удаляет старый обработчик на outerDiv вместе с ним самим.
Нет, unwrap, как оказалось, не виноват. Проблема во wrap. Если заменить wrap двумя строчками, то все работает через ссылку:
JavaScript
1
2
$outerDiv.insertBefore($checkBox);
$outerDiv.append($checkBox);
Я пытался разобраться в исходном коде используемой библиотеки jQuery - мало что понял, но подозреваю, что wrap реализуется клонированием, и из-за этого, видимо, теряется связь с событием resize.

p.s.
Я так уперся именно в ссылку, потому что в реальной программе (а не в представленном примере) хотелось бы использовать преимущества ООП. Поэтому, я сначала создаю через конструктор новый объект с кучей моих методов, а в обработчике события resize вызываю нужный метод через ссылку на объект. Кстати, в этом методе ширина divа меняется нелинейно в зависимости от ширины окна, поэтому проценты CSS не годятся.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
10.12.2017, 12:43
Помогаю со студенческими работами здесь

Почему после метода click перестает работать функция $(window).scroll(function(){.})
Здравствуйте! Почему после метода click(нажатие на ссылку) перестает работать функция $(window).scroll(function(){...}). Как сделать,...

Css перестает работать после выполнения функции
Здравствуйте. Встала у меня такая проблемка. Есть у меня такой кусочек css .buttons { width: 59px; height: 40px; ...

Wi - Fi после 1 или 2 часов перестает работать
Ой даже не знаю куда писать данный вопрос... Если кто знает помогите прошу! На моем ноутбуке стоит Ви - Фи адаптер (блютух соединение с...

Перестаёт работать кнопка после замены
Когда меняю кнопку вместо обычной гиперссылки и ставлю задний фон для текста перестаёт реагировать кнопка. Не понимаю в чём накосячил, до...

Перестает работать Wi-Fi после переустановки Windows 8.1
Здравствуйте, после установки windows 8.1 на ноутбук появились проблемы с WiFi. Подключается без проблем, интернет работает какое-то время,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru