Создайте только один div с jQuery

Question

Я создаю div с jQuery. Он работает хорошо, но каждый раз, когда пользователь нажимает кнопку, он создает новый div. Я хочу создать только один div с уникальным идентификатором. Как я могу это контролировать?

Вот тест: http://jsfiddle.net/g4978v4h/

Jquery:

$("#button").click(function() { 
    $('<div></div>').attr('id', 'red').insertAfter("#button"); 
}); 

HTML:

<div id="button"></div> 

Answer 1

Разделитель с id red следует добавлять только один раз?
Затем используйте .one(), чтобы прикрепить обработчик щелчка

$("#button").one("click", function() { 
    $('<div></div>').attr('id', 'red').insertAfter("#button"); 
}); 

Answer 2

$('#red').length == 0 && $('<div></div>') 
     .attr('id', 'red') 
     .insertAfter("#button"); 

Вы можете попробовать проверить, если DIV уже существуют

http://jsfiddle.net/g4978v4h/1/

Answer 3

Есть много способов, вы можете сделать это

, например, вы можете объявить глобальную переменную и проверить его счетчика

var a = 1; 
$("#button").click(function() { 

    if(a == 1) 
    { 
    $('<div></div>') 
     .attr('id', 'red') 
     .insertAfter("#button"); 
     a = a+1; 
    } 
}); 

, как показанном в jsfiddle here

Answer 4

Вы можете проверить, есть ли #red не существует. Jsfiddle

$("#button").click(function() { 
     if($('#red').length == 0) 
     { 
     $('<div></div>') 
      .attr('id', 'red') 
      .insertAfter("#button"); 

     } 
    });