jQuery/Javascript: Нажмите событие на флажок и 'проверенный' атрибут
Код:
$('input.media-checkbox').live('click', function(e){
e.preventDefault();
var that = $(this);
if (that.attr('checked') == 'checked'){
var m = that.attr('media');
var mid = 'verify_' + m;
that.parents('div.state-container').find('ul.' + mid).remove();
that.attr('checked', false);
} else {
var url = AJAX_URL;
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
success: function(data){
that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
that.attr('checked', 'checked');
}
});
}
return false;
});
Я - ajaxing в форме, затем запуская событие щелчка в соответствующие флажки к ajax в другом неравнодушном при необходимости. Форма вставляется приятно, и события щелчка запущены, установив флажки, которые должны быть установлены и увольнение второго ajax, начиная с checked атрибут флажка был первоначально false.
Что свертывается, мой сыр - то, если я СНИМАЮ один из тех флажков. Несмотря на e.preventDefault(), checked атрибут установлен на false ПЕРЕД тестом, таким образом, if оператор всегда выполняется else оператор. Я также попробовал это $.is(':checked'), таким образом, я полностью экранирован.
Кажется, что снял флажок->, проверенное состояние читает исходное состояние, но проверенный-> неконтролируемый не делает. Какая-либо справка?
5 ответов
Хорошо, верно. Вы установили событие live , поэтому я думаю, что ваш скрипт также может отвечать на установку флажка, но я не могу полностью сказать, что вы пытаетесь сделать здесь, не видя разметка, но вот мой переписанный.
$('input.media-checkbox').live('click', function(e){
if ($(this).is(':checked')) {
var m = $(this).attr('media');
var mid = 'verify_' + m;
$(this).parents('div.state-container')
.find('ul.' + mid)
.remove();
$(this).attr('checked', false);
} else {
var url = AJAX_URL;
var that = this;
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
success: function(data) {
$(that).parents('li')
.siblings('li.verification')
.children('div.media-verification')
.append(data)
.fadeIn(500);
$(that).attr('checked', true);
}
});
}
return false;
});
Похоже, это из-за асинхронных запросов. Выполнение проходит через $. Ajax , прежде чем сработает успешный обратный вызов. Когда вы снова устанавливаете флажок, это означает, что его состояние еще не было обновлено обратным вызовом предыдущего запроса. Что вы можете попробовать, так это отключить элемент управления флажком перед запуском вызова ajax и снова включить его в обратном вызове успеха:
that.attr("disabled", "disabled");
var url = AJAX_URL;
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
success: function(data){
that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
that.attr('checked', 'checked');
that.removeAttr('disabled');
}
});
Это гарантирует, что два последовательных щелчка не приведут к непредсказуемому поведению. Другой способ - использовать синхронный запрос, то есть async: false , но это заблокирует весь браузер на время его выполнения.
Я думаю, что это связано со странной ошибкой в IE. Атрибут Check/set defaultChecked вместе с checked. Попробуйте сделать это в вашем условии if,
if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){
var m = that.attr('media');
var mid = 'verify_' + m;
that.parents('div.state-container').find('ul.' + mid).remove();
that.attr('checked', false);
that.attr('defaultChecked', false);
} else {
Вероятно, это частичный ответ, но в вашем тесте $ (this) .attr ('checked') должен вернуть истина , если отмечена, и ложь в противном случае. Так что просто измените свое условие на if (that.attr ('checked'))
Попробуйте использовать e.stopPropagation () вместо e.preventDefault () , а также удалите return false . Возврат false в jQuery эквивалентен e.stopPropagation () + e.preventDefault () . e.preventDefault () предотвращает установку флажка .