css - jquery. If window size <= certain value, then start jquery. But upon certain conditions jquery executes if screen > than certain value -

html

<div id="currentmedia">gggggggggg</div> 

then css

@media , (max-width: 480px) { #currentmedia { width: 480px; } }  @media , (min-width: 481px) { #currentmedia { width: 481px; } } 

if screen size less 481 px, div width set 480px, else div width set 481px.

then jquery executes on page load , screen resize

var adjust_size = function() {  if (parseint($("#currentmedia").css("width"), 10) <= 480) {  $(document).on('click', '.mnav-ul-li a', function(){ alert( 'clicked1 ' ); });  }  };//var adjust_size = function() { adjust_size(); $(window).resize(adjust_size); 

and html

<ul> <li class="mnav-ul-li"><a href="#gg">option 3</a></li> </ul> 

for example, screen width 400px. click on option 3, executes $(document).on('click', '.mnav-ul-li a', function(){. far ok.

but resize screen width more 480px. , click on option 3. , again executes $(document).on('click', '.mnav-ul-li a', function(){. why? inside if (parseint($("#currentmedia").css("width"), 10) <= 480) { must not execute.

what need correct $(document).on('click', '.mnav-ul-li a', function(){ execute if screen size less 481px?

here placed live example http://jsfiddle.net/kff6yhoc/16/

the reason condition not inside click event handler, on resize. means each time adjust_size called when width <= 480, register click event (you many many times). when width grows above 480, you're no longer registering, event handler still registered.

the solution move if statement inside click event handler:

$(document).on('click', '.mnav-ul-li a', function(){    if (parseint($("#currentmedia").css("width"), 10) <= 480)       alert( 'clicked1 ' ); });