Эти пользовательские флажки jQuery работают неправильно

Question

Я пытаюсь использовать эти пользовательские флажки в стиле MacOSX на своем сайте (это плагин jQuery), но когда я отмечаю один из них, он на самом деле не вызывает $('#input').is(':checked');, пока вы не снимите галочку, а затем он испортится ,

Всякий раз, когда вы устанавливаете флажок, я добавляю немного CSS в строку, которая отмечена, чтобы добавить к ней желтый фон. Но у меня проблемы с ними. Это изображение объясняет это ниже:

Я не понимаю, почему это так. Это моя checkIt() функция, которая добавляет желтый фон при проверке строки:

function checkIt(id) {
    if ($('#checkbox_' + id).is(':checked')) {
        $('#' + id).addClass("selected");
    }
    else {
        $('#' + id).removeClass("selected");
    }
}

И я вызываю это при нажатии, когда флажок установлен. Вот пример разметки, сгенерированной PHP:

<span class="inbox_check_holder">
<input type="checkbox" value="96874" onclick="checkIt(96874)" id="checkbox_96874" class="inbox_check" />
<div class="star_clicker" id="star_96874" onclick="addStar(96874)" title="Not starred"><span id="starimg_96874" class="not_starred"></span></div>
</span>

Я думаю, что это как-то связано с этим пользовательским плагином jQuery, добавляющим дополнительные элементы над <input />.

Вот плагин jQuery checkbox plugin Если вам нужно это увидеть, у них есть множество примеров. (Очевидно) Я использую скин "Safari".

Answer 1

Попробуйте

$(".inbox_check").live("change",function(e){
e.stopPropagation();
if($(this).is(":checked"))
 $('#' + id).addClass("selected");
else
 $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/3/

с JQuery 1,7 вы можете использовать on

$("body").on("change", ".inbox_check", function(e){
        e.stopPropagation();
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/10/

delegate пример

$("body").delegate(".inbox_check","change", function(e){
e.stopPropagation();  
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/15/