共有レガシーjqueryスクリプトを使用したAurelia + Webpack

Question

webpackにバンドルされているaureliaアプリがあります。私たちは別の従来のjsファイルを持っています。このファイルには、ボタンにいくつかのクリックバインディングがあり、私はその場所にドロップしたいと思っています。今、私たちは別のファイルには以下のように見えると言うことができますについて：

    (function (window, $) { 

     $(function() { 
     console.log($('.btn'); //this always shows length 0!! 
     $('.btn').on('click', function (event) { 
      event.preventDefault(); 
      console.log("button was clicked"); 
     }); 
     }); 

    })(window, jQuery); 

 

を私はWebPACKの経由でインポートされたファイルを取得することができ、しかし、jqueryのクリックリスナーが動作していないようです。これをグローバルレベルに持ち込む簡単な方法はありますか？そのため、アプリケーションで使用されるすべてのボタンはこれらのクリックイベントでリッスンできます。また、私はconsole.log $（ '.btn'）には、ページに.btnクラスがあっても、常に長さが0です。

Answer 1

おそらく、要素がページにアタッチされる前に関数が呼び出されている可能性があります。したがって、まだ存在しないオブジェクトにリスナーを追加しています。

1は、すべてのカスタム要素のattached()フックであなたの関数を呼び出します。

私は多くのコードを変更せずに、あなたの問題を解決するには2つの方法を見ることができます。 ない良いところは、

2を使用するイベントの委任を行うにスクリプトを変更するには：このことができます

(function(window, $) { 
    $('body').on('click', '.btn', function(event) { 
    event.preventDefault(); 
    console.log("button was clicked"); 
    }); 
})(window, jQuery); 

願っています！