See what the situation is. The click event is called when you click on an element with a mobil class, but the mobil class appears only when the screen is less than 500px. If you narrow the screen, the mobil class will appear (this is indicated by a red background) but the click event does not occur ... what is the problem? 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>

  • This is a typo that you put an eventListener "click" on the mobil element, and you want it to be applied to mobilE ? - smellyshovel
  • @smellyshovel Sorry sealed. Fixed - Artem PeGaS

2 answers 2

 $('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>

You hang the handler on the elements with the class .mobil to which the class has not yet been assigned. Use ascent, and even if the element is added dynamically, click will work.

    You have more than one class for an element, but two, and the desired .mobil class is second. I will offer two ways to solve the problem:

    1. Make a handler for two classes:

     $('.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. Add an identifier to the div element and check when clicking a class in the clickable tag:

     $('#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>

    Useful links for familiarization: