jQueryが動いていないように思える場合に、まず試してみるべき方法があります。
jQueryのコードをfunctionで囲む
(function($){
コード
}(jQuery))
という形式でコードを囲むと、
jQueryがあっさりと動くことがあります。
例えば、チェックボックスの背景色を制御する下記の
jQueryのコードが動かない場合、
$(function(){
$("table td:has(input[type=checkbox])").hover(function(){
$(this).css("background-color","#efefef");
},function(){
$(this).css("background-color","transparent");
});
$("table td:has(input[type=checkbox])").click(function(){
var chkb = $(this).children("input[type=checkbox]");
if(chkb.attr("checked")) {
chkb.attr('checked', false);
}else{
chkb.attr('checked', true);
}
});
$("table td input[type=checkbox]").click(function(){
if($(this).attr("checked")) {
$(this).attr('checked', false);
}else{
$(this).attr('checked', true);
}
});
});
その
jQueryを囲むと、下記のようになります。
(function($){//これで囲む
$(function(){
$("table td:has(input[type=checkbox])").hover(function(){
$(this).css("background-color","#efefef");
},function(){
$(this).css("background-color","transparent");
});
$("table td:has(input[type=checkbox])").click(function(){
var chkb = $(this).children("input[type=checkbox]");
if(chkb.attr("checked")) {
chkb.attr('checked', false);
}else{
chkb.attr('checked', true);
}
});
$("table td input[type=checkbox]").click(function(){
if($(this).attr("checked")) {
$(this).attr('checked', false);
}else{
$(this).attr('checked', true);
}
});
});
}(jQuery));//これで囲む
これで、jQueryが動くようになる場合がありますので、まずは試してみる価値があるかもしれません。
jQueryデザインブック 仕事で絶対に使うプロのテクニック
