Question

Html

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

然后是css

@media all and (max-width: 480px) {
#currentMedia {
width: 480px;
}
}

@media all and (min-width: 481px) {
#currentMedia {
width: 481px;
}
}

如果屏幕尺寸小于481像素，则div宽度设置为480px，否则div宽度设置为481px。

然后在页面加载和屏幕调整大小上执行的jquery

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

和html

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

例如，屏幕宽度为400px。点击Option 3，执行$(document).on('click', '.mnav-ul-li a', function(){。到目前为止还好。

但调整屏幕大小以使宽度超过480px。然后点击Option 3。并再次执行$(document).on('click', '.mnav-ul-li a', function(){。为什么？它位于if (parseInt($("#currentMedia").css("width"), 10) <= 480) {内部，不得执行。

只有在屏幕尺寸小于481像素时才需要更正才能执行$(document).on('click', '.mnav-ul-li a', function(){？

这里放置了实例http://jsfiddle.net/kff6yhoc/16/

Answer 1

原因是条件不在click事件处理程序中，而是在resize上。这意味着每当宽度<= 480时调用adjust_size，您就会注册click事件（您可能会多次执行此操作）。然后，当宽度增加到480以上时，您不再注册，但事件处理程序仍然已注册。

解决方案是在单击事件处理程序中移动if语句：

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

Answer 2

请尝试这样做会有所帮助.... eveytime你点击选项3它将检查窗口大小...如果尺寸小于480你想要做的事情

$(document).on('click', '.mnav-ul-li a', function(){
  if(CheckWindowSize())
  {
      alert("working...");
  }
    else
    {
        alert("width is less");
    }
});
function CheckWindowSize()
{
    if($(window).width() >= 480)
    {
      return true;
    }
    else
    {   return false;
    }
}

jQuery的。如果窗口大小＆lt; =某个值，则启动jquery。但是在某些条件下，如果屏幕＆gt; jquery执行。超过某个值

2 个答案: