1PeGaS
@1PeGaS

Как решить проблему события click?

Событие click вызывается при нажатии на элемент с классом mobil, но класс mobil появляется только тогда когда экран меньше 500px. Если сузить экран появится класс mobil(об этом говорит красный фон) но событие click не происходит... что за проблема? https://jsfiddle.net/rv4gL3c6/2/

$('.mobil').click(function(){
			$(this).css('background', 'blue');
		});

var doit;
function resizedw(){
	if ($(document).width() < 500){
		$('.block').addClass("mobil");
	} else
	$('.block').removeClass("mobil");

};
window.onresize = function() {
	clearTimeout(doit);
	doit = setTimeout(function() {
		resizedw();
	}, 0);
};

.block{
  height: 100px;
  background: #000;
}

.mobil{
  background: red;
}
<div class="block">
  
</div>
  • Вопрос задан
  • 224 просмотра
Решения вопроса 1
potapchino
@potapchino
что за проблема
вы вешаете обработчик события на элемент, которого не существует в тот момент, в который вы этот обработчик собственно вешаете.

вы можете использовать делегирование:
$('body').on('click', '.mobil', function() {
  $(this).css('background', 'blue');
});

или повесить обработчик на '.block', но тогда при каждом клике проверять, есть ли у него класс '.mobil':
$('.block').click(function() {
  if ( $(this).hasClass('mobil') ) {
    $(this).css('background', 'blue');
  }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@ikerya
Дело в том, что когда вы вешаете слушатель на блок с классом mobil, этого элемента ещё не существует, и чтобы, событие вызывалось, Вам нужно вешать слушатель каждый раз, когда добавляете класс mobil блоку с классом block:

var doit;

function resizedw() {
    if ($(document).width() < 500) {
        $('.block').addClass("mobil");

        $('.mobil').click(function() {
            $(this).css('background', 'blue');
        });
    } else
        $('.block').removeClass("mobil");

};
window.onresize = function() {
    clearTimeout(doit);
    doit = setTimeout(function() {
        resizedw();
    }, 0);
};
Ответ написан
@JuniorNoobie
Сижу в поддержке, пишу мелкие проекты
document.getElementById("parent").addEventListener("click", function(event) {
     if ( event.target.className === 'my-button') {
          //Do your magic
     }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы