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

Question

[pegas]

Событие 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>

Answer 1

[alex]

что за проблема

вы вешаете обработчик события на элемент, которого не существует в тот момент, в который вы этот обработчик собственно вешаете.

вы можете использовать делегирование:

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

или повесить обработчик на '.block', но тогда при каждом клике проверять, есть ли у него класс '.mobil':

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

Comments

[pegas]

Спасибо, применил делегирование, но не понятно почему если расширить экран то уберётся класс mobile но фон синий от нажатия остаётся ... хотя mobile уже нет
https://jsfiddle.net/rv4gL3c6/4/

[alex]

Артём: так вы же этот фон инлайном прописали. я бы фон менял через смену классов. https://jsfiddle.net/b3mqcpe4/

[alex]

Артём: и еще один минус вашего кода в том, что если сразу открыть браузер в ширине меньше 500px, то ваш блок не получит класс '.mobile', можно переписать код вот так

Answer 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);
};

Answer 3

[V Sh.]

document.getElementById("parent").addEventListener("click", function(event) {
     if ( event.target.className === 'my-button') {
          //Do your magic
     }
});