Как предотвратить двойную отправку в одном событии

Question

Когда я нажимаю кнопку «Добавить при первой загрузке», она будет работать в добавлении текста , когда я загружу на другую страницу и вернусь в форму добавления, когда кнопка добавления будет нажата дважды.

<div id="main"> 

//start add 
    <div id="addform"> 
     <p></p> 
     <button id="add">Add</button> 
     <button id="cancel">Cancel</button> 
    </div> 
//end add 

</div> 

Когда я загружаю другую страницу, сначала заполняю переменные и даже контейнер.

$(document).ready(function(){ 


$(document).on('click','#add', function(e){ 
    $('p').append('Sample text, lot and more...'); 
    e.preventDefault(); 
}); 


$(document).on('click','#cancel', function(){ 
    $('#main').empty().append('<div id="viewform">sample text <button id="addtext">Goto Addform</button></div>); 
}); 

$(document).on('click','#addtext', function(){ 
$('#main').empty().append('<div id="addform"><p></p><button id="add">Add</button><button id="cancel">Cancel</button></div>); 
}); 

}); 

Answer 1

связывание Ваше как событие имеет проблемы,

Вашего предоставленного кода,

$(document).on('click','#cancel', function(){ 
    $('#main').empty().append('<div id="viewform">sample text <button id="addtext">Goto Addform</button></div>); 
}); 

он отсутствует закрытие цитаты.

$(document).on('click','#cancel', function(){ 
$('#main').empty().append('<div id="viewform">sample text <button id="addtext">Goto Addform</button></div>); 
}); 

То же самое касается,

$(document).on('click','#addtext', function(){ 
$('#main').empty().append('<div id="addform"><p></p><button id="add">Add</button><button id="cancel">Cancel</button></div>); 
}); 

Должно быть,

$(document).on('click','#addtext', function(){ 
    $('#main').empty().append('<div id="addform"><p></p><button id="add">Add</button><button id="cancel">Cancel</button></div>'); 
    }); 

Answer 2

спасибо за этот $ ('# добавить') от (до щелчка).

$(document).on('click','#cancel', function() 
{ 

$('#add').off('click'); 

$('#main').empty().append('<div id="viewform">sample text <button id="addtext">Goto Addform</button></div>); 

});