Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
VIKT0R
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 112
1

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

09.12.2017, 19:09. Просмотров 140. Ответов 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
Изображения
 
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.12.2017, 19:09
Ответы с готовыми решениями:

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

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

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

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

Перестает работать setInterval
setInterval(function(){ $(&quot;.image1&quot;).attr({&quot;src&quot;: &quot;images/&quot; + i + &quot;.png&quot;});...

4
msheal
690 / 296 / 183
Регистрация: 05.03.2015
Сообщений: 783
09.12.2017, 21:46 2
Разумней было бы решить проблему с шириной с помощью стилей:
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
VIKT0R
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 112
09.12.2017, 22:02  [ТС] 3
Цитата Сообщение от msheal Посмотреть сообщение
В обработчике на ресайз важно не передавать ссылку на outerDiv, а каждый раз выбирать его на странице.
А почему ссылка перестает работать?
0
msheal
690 / 296 / 183
Регистрация: 05.03.2015
Сообщений: 783
09.12.2017, 22:18 4
Потому-что unwrap удаляет старый обработчик на outerDiv вместе с ним самим. Поэтому варианта два - либо после wrap ставить еще один обработчик на ресайз (что плохо) или в самом обработчике ресайза делать выборку, как в моем варианте
0
VIKT0R
9 / 9 / 5
Регистрация: 15.11.2011
Сообщений: 112
10.12.2017, 12:43  [ТС] 5
Цитата Сообщение от msheal Посмотреть сообщение
Потому-что unwrap удаляет старый обработчик на outerDiv вместе с ним самим.
Нет, unwrap, как оказалось, не виноват. Проблема во wrap. Если заменить wrap двумя строчками, то все работает через ссылку:
Javascript
1
2
$outerDiv.insertBefore($checkBox);
$outerDiv.append($checkBox);
Я пытался разобраться в исходном коде используемой библиотеки jQuery - мало что понял, но подозреваю, что wrap реализуется клонированием, и из-за этого, видимо, теряется связь с событием resize.

p.s.
Я так уперся именно в ссылку, потому что в реальной программе (а не в представленном примере) хотелось бы использовать преимущества ООП. Поэтому, я сначала создаю через конструктор новый объект с кучей моих методов, а в обработчике события resize вызываю нужный метод через ссылку на объект. Кстати, в этом методе ширина divа меняется нелинейно в зависимости от ширины окна, поэтому проценты CSS не годятся.
0
10.12.2017, 12:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.12.2017, 12:43

Css перестает работать после выполнения функции
Здравствуйте. Встала у меня такая проблемка. Есть у меня такой кусочек css...

Onscroll перестает работать
Здравствуйте! Есть такая проблема. Делаю страницу - фотогаллерею. При нажатии...

Почему при перестановке скрипт перестает работать?
кто может объяснить почему вот так работает : function getOrderInfoByid(...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru