Как добавить что-то только один раз с помощью jQuery?

Question

Я хочу добавить Jack в конце строки только один раз. Как?

$('button').click(function() { 
 
    $('div').append('Jack'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div>My name is: </div> 
 
<button>click</button>

Другими словами, когда я нажимаю на эту кнопку, если Джек добавляется, то ничего не происходит, но если Джек не существует, то он присоединяет.

Answer 1

$('button').click(function() { 
    $('div').html('Jack'); 
}); 

Это заменит все, что находится внутри DIV

Answer 2

Используйте JQuery в on() и off() методы легко контролировать, когда слушатели событий активны.

Чтобы добавить OnClick слушателя:

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

Для удаления слушателя:

$("button").off("click"); 

В вашем случае, вы можете поместить вызов в off() функцию внутри от обратного вызова on() функции. Результатом является анонимная функция, которая запускается один раз, одним щелчком мыши, а затем удаляется сама.

$("button").on("click", function(){ 
    $("div").append("Jack"); 
    $(this).off("click"); 
} 

Или еще лучше, использовать one(), который будет срабатывать только один раз для каждого элемента.

$("button").one("click", function(){ 
    $("div").append("Jack"); 
} 

Answer 3

$('button').click(function() { 
 
    var text = $('div').text(); 
 
    if(!/Jack/.test(text)){ 
 
    $('div').append('Jack'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div>My name is: </div> 
 
<button>click</button>