Jquery代表事件只在兩個選擇器中的一個上工作

Question

$("body").on("change", "input[type='checkbox'],input[type=radio]", function(event){ 
    $("input[type='checkbox']").on('change',function() { 
    var that = this; 

    if (!$(this).parent().hasClass("remember-label")){ 
     $(this).parent().css("background-color", function() { 
      return that.checked ? "#C0E9F7" : ""; 
     }); 
    } 

    }); 

    $("input[type=radio]").on('click',function() { 
    $(this).parents().eq(1).siblings().css("backgroundColor",""); 
    $(this).parents().eq(1).css("backgroundColor","#C0E9F7"); 

    }); 

}); 

雖然我猜這應該可行，但它只適用於單選按鈕。由於每次內容動態變化，我必須把兩個選擇器，因爲有時單選按鈕被添加到DOM和其他一些複選框。

問題是，輸入的點擊區域變得無法點擊，除非您明確地單擊複選框或單選按鈕而不是覆蓋整個區域的標籤。

這裏是HTML（有軌的，但你可以瞭解結構）

<label for="choice_<%= choice.id %>"> 
      <%= radio_button_tag("choice","#{choice.id}",false,class:"radio big-radio") %> 
      <% if choice.image? %> 
       <%= image_tag rewrite_url(choice.image_url(:resized)), class:"choice-image" %> 
      <% else %> 
       <%= choice.description %> 
      <% end %> 

      </label> 

代碼爲單選按鈕，但同樣適用於複選框。

Answer 1

爲什麼你需要使用事件處理中的事件處理程序..只是，你可以使用它像這樣

$(document).ready(function(){ 
    $("body").on("change", "input[type='checkbox']",function() { 
     var that = this; 
     if (!$(this).parent().hasClass("remember-label")){ 
      $(this).parent().css("background-color", function() { 
       return that.checked ? "#C0E9F7" : ""; 
      }); 
     } 
    }); 
    $("body").on("click", "input[type=radio]" ,function() { 
     $(this).parents().eq(1).siblings().css("backgroundColor",""); 
     $(this).parents().eq(1).css("backgroundColor","#C0E9F7"); 
    }); 
}); 

注：確保您有jQuery的

Answer 2

你應該綁定只有一次：

$("body").on("change", "input[type='checkbox'],input[type=radio]", function(event){ 
    // here you can check if this is check box or radio 

     if($(this).is(":checkbox")) { 
      // do this 
     }else{ 
      // do for radios 
     } 

});