почему нажми обработчик вызывается дважды

Question

Я создал очень простой jsFiddle example обработчика щелчка назначается на два радиокнопки с:

$(document).ready(function() { 
     $(".title").on("click", function (event) { 
      alert('clicked'); 
     }); 
    }); 

Как вы можете видеть, каждый раз, когда переключатель выбран обработчик называется дважды, почему?

<label class="title"> 
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool 
</label> 
<label class="title"> 
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool 
</label> 

Answer 1

Вы используете title класс в обе эти метки, что означает, что он используется на обоих радиокартах. Когда вы нажимаете на нее, она запускает событие на обоих радиокартах. Вы должны делать свою работу с селектором радиокнопки:

$(document).ready(function() { 
    $(":radio").on("change", function (event) { 
     alert('clicked'); 
    }); 
}); 

demo

ссылка change

щелчком

$(document).ready(function() { 
    $(":radio").on("click", function (event) { 
     alert('clicked'); 
    }); 
}); 

demo

Answer 2

Проблема пришедшая из <label>, потому что при нажатии на ярлыке, радио щелкнули, а также и наоборот. Если изменить <label> к <p>, эта проблема будет решена: DEMO HERE

<p class="title"> 
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool 
</p> 

<p class="title"> 
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool 
</p> 

Или просто попробуйте добавить событие щелчка только ввести так:

$(document).ready(function() { 
    $(".title input[type='radio']").on("click", function (e) { 
     alert('clicked'); 
    }); 
}); 

Answer 3

Используйте событие изменения. Он будет работать нормально.

$(document).ready(function() { 
    $(".title").on("change", function (event) { 
     alert('clicked'); 
    }); 
}); 

Answer 4

Попробуйте

$(".title input").on("click", function (event) { 
    alert('clicked'); 
}); 

Answer 5

Это происходит потому, что ваш <input> тег внутри тега <label>; так как нажатие на метку вызывает нажатие на радио, вы в основном щелкаете по радио два раза.

Если вы переместите тэг <input> из тега <label>, вы должны быть в порядке.

Answer 6

Это связано с областью элемента title.

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

HTML:

<label class="title"> 
    <input type="radio" class='checkbox' name="heading" checked="checked" />Introduction and General Information about the Marketing Tool</label> 
<label class="title"> 
    <input type="radio" class='checkbox' name="heading" />Implementation Steps of the Marketing Tool</label> 

Сценарий:

$(document).ready(function (e) { 
     $(".checkbox").on("click", function (event) { 
      alert('clicked'); 
     }); 
    }); 

Fiddle

Answer 7

сделал некоторые изменения, и это работает отлично ...если ваш код корректен здесь ваш example

$(document).ready(function() { 
     $("input[type=radio]").on("click", function (event) { 
      alert('clicked'); 
     }); 
    });