Javascript（jQuery）イベントが失敗します。これをどうすれば解決できますか？

この（jQuery）関数は、jQuery(document).readyとjQuery(document).resizeで呼び出されます。 readyの状態で正常に動作しますが、resizeの場合、イベントはちょっと遅くなります。それらは機能を継承するか、slideToggleの場合は各サイズ変更のために一見起動します。Javascript（jQuery）イベントが失敗します。これをどうすれば解決できますか？

(function(jQuery){ 
    jQuery.fn.responsive = function() { 
     // Vars 
     var menuButton = jQuery('nav #menu-button'); 
     var menuItems = jQuery('nav ul'); 
     var menuLinks = jQuery('nav ul li a.scroll'); 
     var viewportW = jQuery(window).width(); 
     var viewportH = jQuery(window).height(); 
     // Menu links 
     menuLinks.click(function(e){ 
      if (viewportW > 800) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       var pos = jQuery(this.hash).offset().top; 
       jQuery('html,body').animate({scrollTop: pos}, 1000); 
      } else if (viewportW < 799) { 
       e.stopPropagation(); 
       menuItems.slideUp('fast'); // Hide menu on click 
      } 
     }); 
     // Menu button 
     menuButton.click(function(e){ 
      menuItems.slideToggle('fast'); 
      //e.stopPropagation(); 
      //e.preventDefault(); 
     }); 
    } 
})(jQuery);

私は間違っていますか？私はイベントの伝播を殺そうとしましたが、役に立たなかった。

EDIT：

// Doc ready 
jQuery(document).ready(function() { 
    // Run functions 
    jQuery().responsive(); 
}); 


// On resize 
jQuery(window).resize(function(){ 
    jQuery().responsive(); 
});

出典

2012-04-16 Niels

コード内に.resize（）が見えません。 – Bergi

あなたは本当に準備完了イベントやイベントのサイズを変更しようとしていますか？ – Bergi

あなたはコールバックregistation機能の一つが$(someElement).click(...)が好き呼び出すと、そのイベントのハンドラを追加し、実際にです。同じ関数で関数を2回呼び出すと、ハンドラは2回呼び出されます。実証し、（同じページでjquery.jsと）このhtmlページを試してみてください：最初のロードのページで

<html> <head> <script src="jquery.js"></script> <script> function addhook() { $("div").click(function(e) { console.info("click!"); $("body").append($("<div>click!</div>")); return false; }); } $(function() { addhook(); $(window).resize(addhook); }); </script> </head> <body> <div><a href="#">Click me</a></div> </body> </html>

予想通り、それは動作しますが、その後、ウィンドウのサイズを変更した後、「私をクリックして」クリックすると、より多くを取得します1つの「クリック！」よりも

ハンドラを再登録する唯一の理由は、それぞれの要素が破棄されて再作成された場合だけです。

この場合、必要に応じてハンドラを確実に再登録しようとすると便利ではない場合は、delegated eventsまたは.live()を使用することを検討してください。

また、一連の要素のハンドラをすべて削除できる.off() functionにも注意してください。

最後に、あなたはおそらく
jQuery.fnに追加
jQuery.responsive = function() {

に

jQuery.fn.responsive = function() {

を変更する必要がありますすなわち、たとえば、

$("div").responsive();

できるように、jQueryのオブジェクトから呼び出すことができる機能を追加何らかの理由でこれらの機能がjQueryに追加されていますオブジェクト自体であり、それでも機能しますが、後者は関数の目的をより明確にし、jQueryクラスをきれいに保ちます。

出典

2012-04-16 05:13:43

マイケルに感謝します。非常に寛大な説明！私は最後のヒントをありがとうとあなたの説明は泥水を幾分明確にします。私はそれらのリンクに従って、私がそれを理解できないかどうかを見極めるつもりです。 – Niels

私はあなたが前に質問誤解し申し訳ありません：

これが後に実行されます。

私が見ているように、すべてのサイズ変更を$ .responsive（）とする必要はありません。

だけ

$.fn.responsive = function(){ 
    //Vars 
    var menuButton = $('nav #menu-button'); 
    var menuItems = $('nav ul'); 
    var menuLinks = $('nav ul li a.scroll'); 
    //Menu links 
    menuLinks.click(function(event){ 
     //**move width&height inside 
     var viewportW = $(window).width(); 
     var viewportH = $(window).height(); 
     if(viewportW > 800){ 
      event.preventDefault(); 
      event.stopPropagation(); 
      var pos = $(this.hash).offset().top; 
      $('html,body').animate({scrollTop: pos}, 1000); 
     }else if(viewportW < 799){ 
      event.stopPropagation(); 
      menuItems.slideUp('fast');// Hide menu on click 
     } 
    }); 
    //Menu button 
    menuButton.click(function(event){ 
     menuItems.slideToggle('fast'); 
     //event.stopPropagation(); 
     //event.preventDefault(); 
    }); 
}

その後、

$(document).ready(function(){ 
    //just once 
    $.fn.responsive(); 
});

出典

2012-04-16 03:16:33 tym1193

"resize"をコンソールに表示します。'resize'の中で自分の関数を実行することを意味しましたか？この背後にある考え方は何ですか？ – Niels

@NielsOeltjenはクリックごとに現在の幅と高さを取得しますが、サイズは変更しません。 – tym1193

Javascript（jQuery）イベントが失敗します。これをどうすれば解決できますか？

答えて

関連する問題