jquery - Onclick is being called several times even when i have called it only once -


i have put code inside resize function in jquery. click function called multiple times. when click on desired link toggle takes place many times

if ($(window).width() <=768){     if ($('body').hasclass('page-search-ads')){         if ($('#-clasifika-results-simple-search-form               img').hasclass('funnel')) {         } else {             $('#-clasifika-results-simple-search-form').append("<img class='funnel' src='" + drupal.settings.basepath + "sites/all/themes/clasifika/images/filter.png'/>");         }          $('.funnel').click(function(){             $('.vehicle-cat, .vehicle-brand, .city-name-filter, .vehicle-mileage,.overall-cat,.city-name,.boat-bed,.boat-type,.boat-brand,.nautical-length,.overall-year,.airplane-type,.fashion-cat,.airplane-brand,.airframe-time,.propeller-hours,.monthly-salary,.amount-slider,.area-slider').slidetoggle();             console.log("funnel click");         });     } } 

the issue because resize() event fired once every pixel window resized. therefore you're attaching multiple click handlers when resize occurs. need move click outside resize handler, , use delegated event handler. try this:

$(window).resize(function() {     if ($(window).width() <= 768 && $('body').hasclass('page-search-ads') && !$('#-clasifika-results-simple-search-form img').hasclass('funnel')) {         $('#-clasifika-results-simple-search-form').append("<img class='funnel' src='" + drupal.settings.basepath + "sites/all/themes/clasifika/images/filter.png'/>");     } });  $('#-clasifika-results-simple-search-form').on('click', '.funnel', function(){     $('.vehicle-cat, .vehicle-brand, .city-name-filter, .vehicle-mileage, .overall-cat, .city-name, .boat-bed, .boat-type, .boat-brand, .nautical-length, .overall-year, .airplane-type, .fashion-cat, .airplane-brand, .airframe-time, .propeller-hours, .monthly-salary, .amount-slider, .area-slider').slidetoggle();     console.log("funnel click"); }); 

i'd suggest @ using common class or single containing element group elements in click handler, that's biggest selector i've ever seen. also, css media queries may better solution resize() logic too, assuming you're able show/hide relevant element.


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -