(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 этого не делает. Это во всех браузерах.
