1

特定の質問に特別なcssクラスが関連付けられているフォームがあります。document.readyでは、呼び出しと表示を$('.cssclassname').on介してデータを取得し、そのクラス行にデータを返しました。ajax

返されたコンポーネントの 1 つはボタンです。クリックすると、ボタンをクリックしjQuery ModalPopup てデータを取得し$('.cssclassname').on、ModalPopup イベントをアタッチして、ModalPopupそのボタンのクリックで正しく動作するようにします。

今私が直面している問題は、1 つのボタンをクリックするたびに、ページに 3 ～ 4 個のボタンを配置できる場合があることです。modalpopup を開くコードは x 回 (x はボタンの数) 実行されます。modalpopup には同じクラスがあり、ボタンの数が x であるため、同じイベントを x 回アタッチしているため、問題があると思います。

ページの読み込みごとに特定のイベント関数を 1 回だけアタッチするこの問題を解決する方法はありますか。

この質問を説明するのに少し混乱していますが、誰かがこれを手伝ってくれるか、もっと明確にする必要があることを教えてください.

ありがとう

4

2 に答える 2

1

私が理解しているように、2つのオプションがあります。

  • .off()(奇妙な)を使用して再バインドする前に、イベントのバインドを解除します。

  • .on() で委任を使用します。

    $(document).on("クリック", ".className", function(){});

于 2013-05-31T20:16:21.543 に答える
0

最も簡単な方法は、この動作を持つすべてのボタンにクラスを追加し、それらを一度にバインドすることです。

 <button id='modalTrigger1' class='modelPopupTrigger'>Click</button>
 <button id='modalTrigger2' class='modelPopupTrigger'>Click</button>
 <button id='modalTrigger3' class='modelPopupTrigger'>Click</button>

次にJSで

 $(function(){
      $(document).on("click", "button.modelPopupTrigger", function(){..handler..});
 });

または、関数を変数に割り当てて、関数をバインディングに再利用することもできます

 $(function(){
      var modelHandler = function(){... handler...};

      $("#button1").on("click", modelHandler);
      $("#button2").on("click", modelHandler);
 });
于 2013-05-31T20:14:59.740 に答える