引發AJAX的成功部分的.html（結果）不止一次

Question

我有這樣的代碼在我的模板（我曾經嘗試過把它，但它並不能幫助）來處理我的Ajax請求：

​​

它工作。根據假設，#form被替換爲結果中的html。但是，當我再次點擊#send-mail-button。什麼都沒發生。

如果我的代碼改成這樣：

<script> 
    $(document).ready(function() { 

     $("#send-mail-button").click(function(e){ 
      e.preventDefault(); 

      var nameVar  = $('#name').val(); 
      var emailVar  = $('#email').val(); 

      $.ajaxSetup({ cache: false }); 

      $.ajax({ 
        type: "POST", 
        url: "<?php echo base_url(); ?>form/send", 
        data: { name   : nameVar,      
          email   : emailVar 
         }, 
        success: function(result){ 
         alert(result); 
        } 

      }); 

      return false; 

     }); 


    }); 
</script> 

的HTML表單在彈出警告每次。第一個公式使用相同的模板，第二個使用相同的模板。我檢查了源代碼，它總是一樣的（點擊按鈕之前和之後）。

任何想法我的JavaScript有什麼問題？

UPDATE： 我的HTML：

<div id="form"> 

    <form action="" method="post" accept-charset="utf-8"> 

     <label for="name">Name</label> 
     <input type="text" name="name" id="name" /> 

     <label for="email">Email</label> 
     <input type="text" name="email" id="email" /> 

     <button type="button" id="send-mail-button">Send</button> 

    </form> 

</div> 

Answer 1

因爲元素到單擊處理程序是，當你更換形式的內容銷燬。

在這裏，你是在處理第一次請求後的動態元素完成的，所以你需要使用事件代表團

$(document).ready(function() { 

    $("#form").on('click', '#send-mail-button', function (e) { 
     e.preventDefault(); 

     var nameVar = $('#name').val(); 
     var emailVar = $('#email').val(); 

     $.ajaxSetup({ 
      cache: false 
     }); 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url(); ?>form/send", 
      data: { 
       name: nameVar, 
       email: emailVar 
      }, 
      success: function (result) { 
       $('#form').html(result); 
      } 

     }); 

     return false; 

    }); 


});