| ksa | 06.04.2015 13:09 |
Цитата:
|
Сообщение от demoniqus
Что за ерунда?
|
Вызов click() на radio не изменяет его checked
Добрый день!
Столкнулся с непонятной логикой поведения в FF. На странице средствами javascript создается и настраивается форма. Сначала производится ее создание и настройка, а потом она append'ится в состав страницы. В состав этой формы входит radio-группа. На каждый элемент группы через JQuery подвешен обработчик click(). В конце настройки формы, но до ее append'a на страницу, на первом radio принудительно вызывается его click(). В IE, Chrome, Safari все нормально. В FF проблема... обработчик по click вызывается нормально, а вот checked самого radio-элемента остается неизменным... С checkbox'ами такая же картина... Замена click на change тоже эффекта не дало... Что за ерунда? Мне что, писать собственную реализацию метода click? |
Можно погадать почему, но может все-таки код свой покажите?
|
Цитата:
|
(function(){
var elemContainer = $('<div></div>');
elemContainer.addClass('elem-container');
formContainer.append(elemContainer);
var image = $('<img class="grid-icon" src="styles/images/pivot/pivot-columns.png" />');
elemContainer.append(image);
var inputRadio = $('<input type="radio" class="elem-container-switcher" elemtype="cap" name="table-radio-group" id="table-radio-group-capElements" />');
elemContainer.append(inputRadio);
image.click(function(){inputRadio.click();});
inputRadio.click(function(){
if (this.checked) {
elemContainer.parents('.table-headers-type-form:first').find('.active').removeClass('active');
elemContainer.addClass('active');
}
console.log(this.checked)
});
elemContainer.append('<label for="table-radio-group-capElements" class="block-header">Заголовки</label>');
var options = [
//......
];
var optionsList = $('<ul class="no-marked-list no-margin-list no-padding-list" id="options-list"></ul>');
for (var i = 0; i < options.length; ++i) {
//......
}
elemContainer.append(optionsList);
elemContainer.append('<div class="selection-information"></div>');
inputRadio.click();
console.log(inputRadio.get(0).checked)
})();
click в предпоследней строчке кода Первым делом я предположил, что что-то в составе страницы создает такую непонятку, но это оказалось не так. Я написал вот так в чистой странице:
function(){
var df = document.createDocumentFragment();
var input = $('<input type="checkbox" id="checkbox1"></input>');
input.click(function(){
console.log('click => ' + (this.checked ? 'true' : 'false'))
});
input.change(function(){
console.log('change => ' + (this.checked ? 'true' : 'false'))
});
input.click()
$('#result').append(input);
}
Во всех браузерах кроме FF input меняет свое состояние и в консоль пишется true. В FF при вызове input.click()в консоль пишется false и сам checkbox не меняет своего состояния. Я сделал еще одну кнопку и повесил на нее функцию:
$('#do1').click(function(){
var checkbox = $('#checkbox1');
var df = document.createDocumentFragment();
df.appendChild(checkbox.get(0));
checkbox.click();
$('#result').append(checkbox);
});
Результат оказался таким, как я и предполагал: как только checkbox выпал из основного DOM-дерева, он перестал меняться. Использование вместо documentFragment обычного тега (document.createElement('div')) с таким же результатом подтвердило мои догадки. И еще любопытный момент: физический click порождает также событие change, а программный click этого не делает. Это во всех браузерах. |
Цитата:
Кстати, ни разу так не пробовал... Любопытный эффект что ли? Или просто click зацикливается? |
demoniqus, ты нормальный хтмл пример в состоянии сделать? Или так на твой говнокод смотреть и дальше медитировать? :)
|
Цитата:
|
Вот модель происходящего
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
$('#do').click(function(){
var df = document.createDocumentFragment();
var input1 = $('<input type="checkbox" id="checkbox1"></input>');
input1.click(function(){
console.log('click => ' + (this.checked ? 'true' : 'false'))
});
input1.change(function(){
console.log('change => ' + (this.checked ? 'true' : 'false'))
});
input1.click()
$('#result').append(input1);
});
});
</script>
</head>
<body>
<button id="do">CYCLE</button>
<div id="result"></div>
</body>
</html>
|
Цитата:
Ты понимаешь термин "тестовый пример"? |
Устанавливайте обработчик элементам при их добавлении на страницу, или делегируйте их обработку ближайшему родителю гарантировано присутствующему на странице.
|
| Часовой пояс GMT +3, время: 22:12. |