javascript - 存在しない場合にjqueryにdiv要素を追加する方法

Question

テーブルの下部にあるdivボックスに現在のリストからフォームを追加しています。誰かが追加ボタンをクリックしたときにdivボックスを追加しています。

しかし、[追加]ボタンを複数回クリックすると、多くのdivボックスが追加されます。

ボタンを何度クリックしても、1つのインスタンスだけがdivボックスに追加される方法はありますか？

これは私のコードです

$var = $(this).parent().parent();
$var.append($('.jq_div')[0].outerHTML);

Answer 1

を使用してリスナーをアタッチします.one()。

$("button").one('click', function(){
  // Your code
});

続きを読む：http ：//api.jquery.com/one

これは、jQuery1.7以降を使用していることを前提としています。

Answer 2

簡単な解決策の1つは、ボタンがクリックされると切り替えることができるブールフラグを設定することです。さらに、実際には、この正確な機能を提供するjQuery関数があります。

それは呼ばれますone()-

要素のイベントにハンドラーをアタッチします。ハンドラーは、要素ごとに最大1回実行されます。

したがって、コードは次のようになります-

$("#someTrigger").one('click', function(){
  $var = $(this).parent().parent();
  $var.append($('.jq_div')[0].outerHTML);
});

ブール法も非常に簡単です-

var wasClicked = false;

$("#someTrigger").on('click', function(){
  if (wasClicked == false){
    // append your form
    wasClicked = true;
  }
});

参照 -

• one()