JQuery: добавление div только один раз "на клик"

Я пытаюсь добавить section в div одним нажатием кнопки.

Я хочу, чтобы section был добавлен только при первом щелчке, код, который я использую ниже, добавляет section каждый раз, когда я нажимаю div.

Как мне это сделать?

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

Ответы

Ответ 1

Вы можете использовать one(), который срабатывает только один раз

$("#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
});

Ответ 2

Используйте условное выражение, чтобы определить, есть ли оно.

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

Ответ 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
});

Ответ 4

Вы можете использовать .unbind()

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

Ответ 5

Вы можете проверить, имеет ли элемент класс по умолчанию, append html. Например, вы можете добавить класс в html-код, например: class= "first", и после первого щелчка удалить этот класс.

Код вроде этого:

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

И затем после первого щелчка, "первый" класс будет удален из вашего html, а JQuery не добавит никакого дополнительного html.

Ответ 6

Вы можете установить переменную и запустить событие, если переменная установлена в true или false.

var _clicked = false;

$('.element').click(function(){
  if(!_clicked){
   _clicked = true;
   console.log('event fired');
  }
})