0

Смотрите какая ситуация. Событие 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block">

</div>

2
  • Это опечатка, что вы навешиваете eventListener "click" на элемент mobil, а хотите, чтобы он применился к mobilE? Commented 7 мая 2017 в 8:51
  • @smellyshovel Извиняюсь опечатался. Исправил Commented 7 мая 2017 в 8:57

2 ответа 2

1

$('body').click(function() {
var elem = $(this).closest('.mobil');
if (elem.length == 0) return;
  elem.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block">

</div>

Вы навешиваете обработчик на элементы с классом .mobil которым класс ещё не присвоен. Используйте всплытие, и догда даже если елемент добавится динамически, click сработает.

0

У Вас не один класс у элемента получается, а два, причем искомый класс .mobil стоит вторым. Предложу два способа решения проблемы:

  1. Сделать обработчик на два класса:

$('.block, .mobil').click(function() { // классы через запятую .block, .mobil
  console.log('click');
  $(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block">

</div>

  1. Добавить идентификатор к элементу div и проверять при клике наличие класса в кликабельном тэге:

$('#main-div').click(function() { // обработка клика 
  if ($(this).hasClass('mobil')) { // если есть класс mobil
    console.log('click');
    $(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main-div" class="block"></div>

Полезные ссылки для ознакомления:

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.