Как сменить checked, кликнув по тому же элементу?

Question

[Евгений Кылин]

Как при клике на "чекнутый" элемент, отследить, что он уже был "чекнут".
Событие on click срабатывает позже change, и получается, что все "чекнутые".
Пытался, не получается:

<input name="primer" type="radio" value="vasya">
<input name="primer" type="radio" value="petya">
<input name="primer" type="radio" value="fedya">

$('*').on('click', '[name="primer"]', function(){
	if($(this).is(':checked')){
		console.log('double check');
	}	
})

Answer 1

[RubaXa]

$('*').on('click', '[name="primer"]', ... — ох,
UPD $('*').on('...') — выбрать все элементы на странице и повесить на всех событие. При том, вы не просто вешаете событие, а используете делегирование. Если кратко, то делегирование используется, чтобы не вешать один обработчик на Х-элементов, а повесить один на контейнер и фильтровать цель по селектору:

<div class="root">
   <div class="inner">
       <div class="deeper">
          <div class="js-item">item 1</div>
          <div class="js-item">item 2</div>
          <div class="js-item">item 3</div>
       </div>
   </div>
</div>

$('*').on('click', '.js-item', function () {
    console.log('Неправильно');
});

$('.root').on('click', '.js-item', function () {
    console.log('Правильно');
});

$('.js-item:first').click(); // имитируем `click`
/**
Результат:
------
"Неправильно"
"Неправильно"
"Неправильно"
"Правильно"
"Неправильно"
"Неправильно"
 **/

jsbin.com/cosavelala/edit?html,js,console,output

Comments

[Евгений Кылин]

Что не так?

Answer 2

[Андрей]

Обычно не пишут селектор звёздочка, тем более при навешивании событий. Впрочем, его лучше нигде и никогда не использовать (разве что при сбросе стилей браузера, да и то, это спорное решение). Лучше написать $(document).

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

Answer 3

[Евгений Кылин]

Вопрос почему $(*) , потому что данные подгружаются на ajax, поэтому отслеживать через ready или load не получается.

Comments

[Андрей]

Еще раз - я вам написал, ни в коем случае не навешивайте события через звёздочку. В этом случае у вас ваше событие навесится на все существующие на странице элементы.
Вот. мой пример с добавленным инпутом - https://jsfiddle.net/xkmg05qq/2/
Посмотрите в дебагере, на всех элементах (в том числе и на невидимых вроде head) навесилось событие.
Вместо звёздочки пишите document, вот так:
$(document) // обратите внимание, document пишется без кавычек

[Андрей]

И да, мой пример никаких ready и load не использует, и вполне себе работает с данными полученными через ajax и динамически созданными. On всегда так работает

Answer 4

[GreatRash]

Для начала нафига вам тогда radio вместо checkbox, если вы всё равно хотите поведение чекбокса имитировать?