JQuery / Javascript: событие Click на флажок и атрибут «флажок» - PullRequest
Новая
       14

JQuery / Javascript: событие Click на флажок и атрибут «флажок»

13 голосов
/ 07 мая 2010

код: 

$('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 в форме, затем запускаю событие click на соответствующих флажках для ajax в другой части, если это необходимо. Форма вставлена ​​правильно, и события click запускаются, проверяя поля, которые нужно проверить, и запуская второй ajax, поскольку атрибут checked флажка изначально был false.

Что мешает моему сыру, если я ОТКЛЮЧУЮ одну из этих коробок. Несмотря на e.preventDefault(), атрибут checked установлен на false ДО теста, поэтому оператор if всегда выполняет оператор else. Я также попробовал это с $.is(':checked'), поэтому я совершенно сбит с толку.

Похоже, что непроверенное -> проверенное состояние считывает исходное состояние, а проверенное -> непроверенное - нет. Любая помощь?

Ответы [ 6 ]

15 голосов
/ 16 апреля 2012

Б.Е., я знаю, что прошел год, но я думаю, что нашел решение,

Проблема здесь заключается в том, что событие click фактически вызывается и запускается ДО того, как свойство флажка будет добавлено к входу флажка. Таким образом, функция запускается, проверяет, имеет ли вход атрибут «checked», и выполняет условие else. ТОГДА элемент получает свойство «selected».

Я только что столкнулся с этим, и мое решение состояло в том, чтобы привязать функцию к функции изменения, а не к функции щелчка, поскольку изменение запускается только ПОСЛЕ обновления свойства selected на входе.

Надеюсь, это поможет вам, а если нет, то всем, кто случайно наткнулся на этот пост, столкнувшись с подобной проблемой.

2 голосов
/ 07 мая 2010

Ну, верно. Вы установили событие 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;

});
1 голос
/ 12 мая 2010

Попробуйте использовать e.stopPropagation() вместо e.preventDefault(), а также удалите return false. Возвращение false в jQuery эквивалентно e.stopPropagation() + e.preventDefault(). e.preventDefault() предотвращает установку флажка checked.

0 голосов
/ 15 мая 2010

Вероятно, это только частичный ответ, но в вашем тесте $(this).attr('checked') должен вернуть true, если отмечено, и false, если нет. Так что просто поменяйте условное на if (that.attr('checked'))

0 голосов
/ 12 мая 2010

Я думаю, это из-за странной ошибки в IE. Проверьте / установите атрибут defaultChecked вместе с флажок . Попробуйте это в вашем условии 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 {
0 голосов
/ 07 мая 2010

Кажется, это связано с асинхронными запросами. Выполнение проходит мимо $.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, но это заблокирует весь браузер на время его выполнения.

...