Question

我正在一个我们正在努力优化ipad使用的网站上工作。当您将ipad的方向更改为网站的横向部分时，应隐藏以使其更易于阅读。一切都有效，但是当你从一个画面改为另一个画面并再次回到画面时，它似乎排队了＃39;以前的jquery函数并一个接一个地运行它们。

因此，如果从0度变为90度，则会触发90度功能。从90变为180然后它会触发90和180功能。从180变为-90，它会触发90,180和-90函数。

有谁知道为什么要这样做以及如何阻止它？

CNC中排队的功能是点击事件。这导致，当点击按钮时，目标div的高度像手风琴一样迅速增大和减小！

以下代码：

jQuery(window).bind('orientationchange', function(e) {

          if(Math.abs(window.orientation) == 0){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);

              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 0');    
              });
              return false;
          }

          if(Math.abs(window.orientation) == 90){
            $("a.more-button").click(function(){
              $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
              console.log('it fired 90');   
            });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
          }

          if(Math.abs(window.orientation) == -90){
              $("a.more-button").click(function(){
                  $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
                  console.log('it fired -90');  
              });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
        }

          if(Math.abs(window.orientation) == 180){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);
              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 180');      
              });
              return false;
          }

  }, false);

CNC中解决方案！按照西蒙的建议，我已经用他的代码和另一个用户（他们没有留下他们的名字，因此我不能信用）来解决问题。

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;

    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (screenOrientation === 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
    } else {
      $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        console.log('portrait');
      $("a.more-button").on("click.MyClickEvents", function () {
          $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
          console.log('it fired 0');
      });
    }
});

Answer 1

您在每个orientationchange上绑定点击事件处理程序，以便排队。尝试将事件放在命名空间中，并在重新绑定它们之前取消绑定orientationchange上此命名空间中的所有事件。她举了一个简单的例子：

// assume these are the events bound to different some buttons
$('#foo').on('click.myNS', ...);
$('#bar').on('keyup.myNS', ...);
$('#baz').on('dblclick.myNS', ...);    

// magic occurs here...
$('#foo, #bar, #baz').off('.myNS');

// ...and afterwards, the three binds from above are gone

所以在你的情况下，它将是：

jQuery(window).bind('orientationchange', function (e) {

    // First of all, we need to unbind previous events
    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (Math.abs(window.orientation) == 0) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);

        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 0');
        });
        return false;
    }

    if (Math.abs(window.orientation) == 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == -90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired -90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == 180) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 180');
        });
        return false;
    }

}, false);

Ipad方向更改导致jquery触发多个函数

1 个答案: