0

さまざまなdivのコンテキストメニュー用のプラグインを開発しています

<div>
  <div class='first'>some data</div>
  <div class='second'>some data</div>
  <div class='third'>some data</div>
  <div class='fourth'>some data</div>
</div>

これは、コンテキストメニューとして表示するメニューです。

<ul id='cmenu'>
 <li id='menuItem1'>Item1</li>
 <li id='menuItem2'>Item1</li>
 <li id='menuItem3'>Item1</li>
 <li id='menuItem4'>Item1</li>
 <li id='menuItem5'>Item1</li>
 <li id='menuItem6'>Item1</li>
</ul>

このプラグインの仕組み：部門ごとにメニュー項目のリストが変更され、メニュー項目のコールバックも変更されます。

(function($) {
     $.fn.cnxtmenu = function(options) {
          var defaults = {
              'menuid' : '',
               item1 : function() {},
               item2 : function() {},
               item3 : function() {},
               item4 : function() {},
               item5 : function() {},
               item6 : function() {},
          },
          opt = $.extend({}, defaults, options);

          var mid = '#'+opt.menuid, seldiv;
          this.live({
               "contextmenu" : function(e) {
                     seldiv = $(this);
                     if ($(this).hasClass('first')) {
                         //change the menu list         
                     }
                     else if($(this).hasClass('second')){
                         // change the menu list to display different items 
                     } 
                     else if($(this).hasClass('file-list')){
                         //differ list  
                     }
                     else if($(this).hasClass('dstore_file-list')){
                         //differ menu list
                     }
                     $(mid).css({
                          top : e.pageY + 'px',
                          left : e.pageX + 'px'
                     }).show();
                     return false;
                 }
            });

            $(mid).children('li').unbind('click').click(function(e) {
                e.stopPropagation();
                e.preventDefault(); 
                switch(this.id) {
                    case 'menuItem1':
                        opt.item1(this, seldiv);
                        break;
                    case 'menuItem2':
                        opt.item2(this, seldiv);
                        break;
                    case 'menuItem3':
                        opt.item3(this, seldiv);
                        break;
                    case 'menuItem4':
                        opt.item4(this, seldiv);
                        break;
                    case 'menuItem5':
                        opt.item5(this, seldiv);
                        break;
                    case 'menuItem6':
                        opt.item6(this, seldiv);
                        break;
            }
            $(mid).hide();
            return false;
        });

        $(mid).click(function() {
            $(mid).hide();
        });
        $(document).click(function() {
            $(mid).hide();
            });
       }
})(jQuery);

私はこのプラグインをこのように使用しています。

$('.first').cnxtmenu({menuid:'cmenu',
    item1:some callbacks
});

//...

$('.fourth').cnxtmenu({menuid:'cmenu',
     // soem differt callbacks.
});

4つのdivすべてに、異なるコールバックが割り当てられます。

私の問題は、コールバックがセレクター間で異ならないことです。最後の、つまり4番目のセレクターのコールバックだけが実行されています。そして、コールバックは何度もトリガーされています。

コードのどこが悪いのか教えてください。

前もって感謝します。

4

2 に答える 2

1

間違った方法でコールバックを割り当てているという問題が発生しました。コールバックは、最後の分割で指定したとおりに割り当てられます。したがって、コンテキストメニュー関数内でコールバックを割り当てる必要があります。

次に、プラグインを呼び出す回数だけプラグインコードも実行され、コードとしてコールバックもオンロードで割り当てられます。コード変更後も心配する必要はありません。

于 2012-08-23T11:59:44.737 に答える
1

cmenu与えられた例では、への各呼び出しに同じオブジェクトとしてリストを渡しますcnxtmenu()。cmenuは永続的であるため、リスナーをクリックunbindすると、以前に接続されていたリスナーが削除され、新しいリスナーに置き換えられます。

呼び出しごとに異なるコンテキストメニューを渡す必要があるか、cnxtmenu()複数のコールバックを持つものを再設計してみることができますが、コンテキストメニューをトリガーした要素に基づいてそれらを除外します。

on()また、jQuery 1.7より前のバージョンに制限されていない限り、 andoff()の代わりにlive()andを使用する必要がありunbind()ます。

于 2012-08-23T06:23:19.563 に答える