Почему два события щелчка зарегистрированы в этом html / css/jquery

вы также можете попробовать:

$('label[for^="test_"]').click(function(){
    $('div#target').append($(this).clone());
    return false;    
});

это потому, что вы связываете событие на label, которая содержит checkbox и вы используете for="chekbox_id". Итак, событие уволено за label а также checkbox.

<ul>
    <li>
        <label for="test_0" class="">Fall</label>
        <input id="test_0" name="offering_cycle" type="checkbox" value="1" />
    </li>
    <li>
        <label for="test_1" class="">Spring</label>
        <input id="test_1" name="offering_cycle" type="checkbox" value="2" />
    </li>
    <li>
        <label for="test_2" class="">Summer</label>
        <input id="test_2" name="offering_cycle" type="checkbox" value="3" />
    </li>
    <li>
        <label for="test_3" class="">Other</label>
        <input id="test_3" name="offering_cycle" type="checkbox" value="4" />
    </li>
</ul>
<div id="target"></div>

взять input из label.

демо:http://jsfiddle.net/tusharj/fdm1pmj2/5/

Итак, что я сказал в комментарии. Он генерирует два события щелчка мыши, сделайте это вместо этого, и он работает как шарм:Скрипка

$('input').on('click',function(){
   console.log("clicked");
    $('div#target').append($(this).parent().clone());    
});

возможно, вы захотите переименовать свой вклад.

а попробуйте это.

добавьте общий класс ко всем событиям Label и fire на этом. Вот так:

<ul>
    <li>
        <label for="test_0" class="testClass">
            <input id="test_0" name="offering_cycle" type="checkbox" value="1"> Fall
        </label>
    </li>
    <li>
        <label for="test_1" class="testClass">
            <input id="test_1" name="offering_cycle" type="checkbox" value="2"> Spring
        </label>
    </li>
    <li>
        <label for="test_2" class="testClass">
            <input id="test_2" name="offering_cycle" type="checkbox" value="3"> Summer
        </label>
    </li>
    <li>
        <label for="test_3" class="testClass">
            <input id="test_3" name="offering_cycle" type="checkbox" value="4"> Other
        </label>
    </li>
</ul>

и

$(".testClass").on('click',function(){
      $(this).toggleClass('testing');
});

событие click запускается дважды: один раз для метки и один раз для флажка. Вам нужно выбрать только флажок.

$('label[for*=test_] > input').on('click',function(){
    $('div#target').append($(this).parent().clone());    
});

JSFiddle здесь

вы можете попробовать это...

$("label").find("*").click(function( event ) {
     event.stopPropagation();
});

$('label[for*=test_]').on('click',function(){
     $(this).toggleClass('test');
});

чтобы объяснить, что происходит:

• ввод нажат, но так как метка привязана к этому входу с помощью for атрибут и просто быть дочерним элементом, вот ваше первое зарегистрированное событие.
• чем входной сигнал распространяет щелчок (все элементы распространяют щелчки) вниз к метке,и поскольку метка является вашим делегированным элементом-вот ваше второе событие.

так как вы обернули свои флажки ввода внутри Элемент метки,
вы можете на самом деле слушайте даже на том input:

$('label[for*=test_] input').on('click',function(){
    $('div#target').append($(this).closest("label").clone());    
});

и чем клонировать родительскую метку. jsFiddle

другой способ предотвратить это братство между меткой и внутренним входом-остановить вход, чтобы распространить событие, позволяя ограничивать метку > > флажок к его заданию: скрипка

$("label:input").on("click", function( evt ) {
    evt.stopPropagation();
});
$('label[for*=test_]').on('click',function(){
    $('div#target').append($(this).clone());
});

иначе мог бы запретить поведение метки по умолчанию jsFiddle
это запускает события из связанного ввода, и это использует e.preventDefault() но ваш (скрытый) флажок ввода не получит проверено!

$('label[for*=test_]').on('click',function( e ){
    e.preventDefault();
    $('div#target').append($(this).clone()); 
});

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

на на атрибут на данной метке должен быть связан с имя ввода не id.

вы можете вызвать метод stopPropagation на мероприятие и вы можете ввести событие в обработчик щелчка.

пример:

$('label[for*=test_]').on('click',function(e){
    e.stopPropagation();
});

пример html:

<div class="parent something">
    <div class="child something">
    </div>
</div>

теперь, если у вас есть обработчик клика на div.something он не будет стрелять дважды, но вы все равно можете использовать оба.

источники:

• https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
• https://learn.jquery.com/events/inside-event-handling-function/