Question

当我在第一次加载时单击添加时，它将附加文本当我加载到另一个页面，并在单击添加按钮时返回addform时，它会双重附加。

 <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>);
 });

 });

这是一个类似的问题，在我的案例中jsfiddle.net/Gajotres/CCfL4

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

感谢 $（'#add'）。off（'click'）;

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

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

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

});

如何防止在单个事件中双重提交

2 个答案: