jQuery/Javascript: Nhấp vào sự kiện trên một hộp kiểm và 'kiểm tra' thuộc tính

Question

Mã:

$('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; 
}); 

Tôi ajaxing trong một hình thức, sau đó bắn sự kiện click vào hộp kiểm có liên quan đến ajax trong một phần nếu cần thiết . Biểu mẫu được chèn vào độc đáo và các sự kiện nhấp được kích hoạt, kiểm tra các hộp cần được kiểm tra và kích hoạt ajax thứ hai, vì thuộc tính checked của hộp kiểm ban đầu là false.

Điều gì đang quấy rầy phô mai của tôi là nếu tôi KHÔNG BAO GIỜ một trong những hộp đó. Mặc dù e.preventDefault(), thuộc tính checked được đặt thành false TRƯỚC KHI thử nghiệm, do đó, câu lệnh if luôn thực thi câu lệnh else. Tôi cũng đã thử điều này với $.is(':checked'), vì vậy tôi hoàn toàn bối rối.

Dường như không được chọn -> trạng thái đã chọn đọc trạng thái ban đầu, nhưng đã chọn -> bỏ chọn không. Bất kỳ giúp đỡ?

Answer 1

BE, tôi biết nó đã được một năm nhưng tôi nghĩ rằng tôi đã tìm thấy các giải pháp,

Vấn đề ở đây là sự kiện nhấn thực sự nhận được gọi là và chạy trước khi "kiểm tra" thuộc tính được thêm vào đầu vào hộp kiểm. Vì vậy, hàm chạy, tìm xem đầu vào có thuộc tính "đã kiểm tra" hay không và chạy điều kiện khác. THEN phần tử được gán thuộc tính "đã kiểm tra".

Tôi cũng chạy vào điều này và giải pháp của tôi là liên kết hàm với hàm thay đổi thay vì hàm nhấp chuột, vì thay đổi chỉ kích hoạt SAU khi thuộc tính đã kiểm tra đã được cập nhật trên đầu vào.

Hy vọng điều này sẽ giúp bạn, và nếu không, bất kỳ ai khác tình cờ gặp phải vấn đề tương tự.

Answer 2

Vâng, đúng. Bạn đã đặt sự kiện live, vì vậy tôi nghĩ rằng tập lệnh của bạn cũng có thể phản hồi để đặt nó là đã chọn, nhưng tôi hoàn toàn không thể nói những gì bạn đang cố gắng ở đây mà không thấy đánh dấu, nhưng đây là viết lại của tôi.

$('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; 

}); 

Answer 3

Dường như là do yêu cầu không đồng bộ. Việc thực hiện vượt qua $.ajax, trước khi xảy ra các cuộc gọi lại thành công. Khi bạn nhấp lại vào hộp kiểm, trạng thái của nó vẫn chưa được cập nhật bằng cách gọi lại của yêu cầu trước đó. Những gì bạn có thể thử là để vô hiệu hóa việc kiểm soát ô trống trước khi bắn các cuộc gọi ajax, và cho phép nó một lần nữa trong callback thành công:

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'); 
    } 
}); 

Điều đó sẽ đảm bảo rằng hai lần nhấp chuột liên tiếp sẽ không dẫn đến hành vi không thể đoán trước. Cách khác là sử dụng yêu cầu đồng bộ, tức là async: false nhưng sẽ chặn toàn bộ trình duyệt trong thời gian đó.

Answer 4

Thử sử dụng e.stopPropagation() thay vì e.preventDefault() và cũng xóa return false. Trả lại false trong jQuery tương đương với e.stopPropagation() + e.preventDefault(). e.preventDefault() ngăn hộp kiểm từ checked.

Answer 5

Tôi nghĩ rằng đó là do một lỗi lạ trong IE. Kiểm tra/đặt thuộc tính mặc địnhChecked cùng với kiểm tra. Hãy thử điều này trong khi tình trạng của bạn,

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 { 

Answer 6

Đây có lẽ chỉ là một câu trả lời một phần, nhưng trong thử nghiệm của bạn, $(this).attr('checked') nên trở true nếu kiểm tra và false nếu không muốn nói. Vì vậy, chỉ cần thay đổi điều kiện của bạn để if (that.attr('checked'))