防止多个事件触发

Question

I am here again

SEE DEMO HERE

$(document).ready(function () {

    $("#id_priori").on('click', 'li', function(){
        var self = $(this),
            checkbox = self.find(":checkbox")[0];

        checkbox.checked = !checkbox.checked;

        self.toggleClass( 'on', checkbox.checked );
    }).find(":checkbox").each(function(){
       $(this).closest('li').toggleClass('on', this.checked);
    });

    $("#id_tipo").on('click', 'li', 'label', function () {
        var self = $(this),
            radio = self.find(":radio")[0];

        radio.checked = !radio.checked

        $(":radio:not(checked)").each(function () {
            $(this).closest('li').toggleClass("on", this.checked);
        });

    })
        .find(":radio").each(function () {
        $(this).closest('li').toggleClass('on', this.checked);
    });

});

Everything works fine but for the labels , when I click them they dont check , doing a little tweaks it seems like one event is triggrering multiple times and it unchecks them , try setting an alert and you'll see what I mean

Any idea whats wrong ?

Answer 1

Because you're taking over the role of the actual input you need to allow the input element to carry on with its own behavior ( http://jsfiddle.net/icodeforlove/rF2FT/2/ )

if (event.target === checkbox) return;

All you need to do is return early if the target is the actual input element. Right now the input element is checking itself and then you're telling it to uncheck itself.