jQueryプラグイン - グローバルセレクタの動的クリック処理

Question

後でクリックイベントを発生させる小さなウィジェット（GETメソッド）を読み込むjQueryプラグインをプログラミングしています。

プラグインを初期化するときに、要素セレクタがDOMにないことがあります。では、どのようにしてセレクタをクリックしてイベントを処理するためのグローバルな格納を行うことができますか？

私はあなたに理解しやすいようにコードを簡潔にしています。

(function($) { 
    var $template; // the global variable 

    $.fn.myPlugin = function() { 
     $(this).bind('click', function(e) { 
      $.get('/template.html', function(data) { 
       $('body').append(data); 
       $template = $(data); // set global variable here 
      } 
     } 

     // fire click event on global variable here, but $template is undefined 
     $(document).on('click', $template.find('.button'), function() { 
      // do something 
     } 
    } 
})(jQuery); 

ありがとう！

Answer 1

テンプレートが既にロードされていることが確実である場合、コールバックにイベントハンドラを定義するだけです。

(function($) { 
    var $template; // the global variable 

    $.fn.myPlugin = function() { 
     $(this).bind('click', function(e) { 
      $.get('/template.html', function(data) { 
       $('body').append(data); 
       $template = $(data); // set global variable here 
       // fire click event on global variable here, but $template is undefined 
       $(document).on('click', $template.find('.button'), function() { 
       // do something 
       } 
      } 
     } 
    } 
})(jQuery);