Jquery：「クリックするだけでdivを一度だけ追加」

Question

ボタンをクリックするとsectionをdivに追加しようとしています。

最初のクリックでのみsectionを追加したい場合は、divをクリックするたびに、以下で使用するコードにsectionが追加されます。

どうすればよいですか？

$("#nextractorapply").click(function() { 
    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 

Answer 1

あなたはそれがあるかどうかを決定するために、条件を使用して、一度だけ

$("#nextractorapply").one('click', function() { 
    // executes only once 

    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 

$("#nextractorapply").on('click', function() { 
    // executes every time 

    // do other stuff 
}); 

Answer 2

を発射one()を、使用することができます。

$("#nextractorapply").click(function() { 
    if($('#nextractor').length < 0){ 
     $("#main").append('<section id="nextractor" class="five"> </section>'); 
    } 
}); 

Answer 3

何らかの種類の条件を使用して、その複数回の追加を防ぐことができます。

var counter=0; 
$("#nextractorapply").click(function() { 
    if(counter<=0){ 
     $("#main").append('<section id="nextractor" class="five"> </section>'); 
     counter++; 
    } 

    //YOUR OTHER STUFF THAT YOU NEED TO EXECUTE ON EVERY CLICK 
}); 

Answer 4

あなたはHTMLを追加し、要素はデフォルトのクラスを持っている場合は、チェックすることができ.unbind()

$("#nextractorapply").unbind().click(function() { 
    $("#main").append('<section id="nextractor" class="five"> </section>'); 
}); 

Answer 5

を使用することができます。 たとえば、class = "first"のようなhtmlコードにクラスを追加して、そのクラスを最初にクリックした後で削除できます。このような

コードの何か：

var element = $("#nextractorapply"); 
    if(element.hasClass("first")){ 
      $("#main").append('<section id="nextractor" class="five"> </section>'); 
      element.removeClass("first"); 
    } 

そして最初のクリック後、「最初の」クラスは、あなたのHTMLから削除されるとjQueryはそれ以上のhtmlを追加しません。