綁定到動態創建的DOM元素的jQuery事件發生了錯誤

-1

<form action='xxx.php' method='post'> 
     <table> 
     <tr> 
      <th>Branch Id</th> 
      <td><input id="branchId" type="text" size="15%" name="branchId"></input></td> 
     <th>Branch Name</th> 
      <td colspan="3"><input id="branchName" type="text" size="75%" name="branchName"></input></td> 
      <td> 
       <div id="button"> 
       <input type="button" id="btnAdd" value="Add" name="submit"/> 
       </div> 
      </td> 
     </table> 
    </form> 


    <!------- Something here---------------> 

    <table class="divTable" id="exisBranch"> 
     <tr><th id="thBranchId">Branch Id</th> 
     <th id="thBranchName">Branch Name</th> 
     <th class="btn" id="tcEdit">Edit</th> 
       <th class="btn" id="tcDelete">Delete</th> 
     </tr> 

</table>

基本上發生的是我填充通過AJAX檢索到的第二個表記錄。每行都有一個'branchId'，'branchName'和兩個類'bt'的按鈕。當我點擊編輯按鈕時，我需要在第一個表格的輸入元素中插入相應的'branchId'和'branchName'值，以便我可以編輯它們，稍後當單擊「btnAdd」時，我可以保存它們。

這是我有的jQuery。

 function fun(){ 
       var branchId=$(this).closest("tr").find("td").eq(0).html(); 
       $("#btnAdd").click(function() { 
     if($("#btnAdd").val()=='Save') 
      { 
       alert(branchId); 
          //ajax call 

      } 

     }); 
     } 


     $(document).ready(function(){ 
      $("#exisBranch").on('click','.bt',fun); 
      $("input[type='button']").click(function(e){ 
        e.preventDefault(); 
      });  
     });

當我第一次點擊'btnAdd'時，一切正常。該問題始於第二次連續點擊此按鈕。考慮到動態填充內容中有6行，並且每行的'branchId'是相應的行號。

當我第一次點擊的第2行「編輯」按鈕，然後在「btnAdd」，警告正確彈出顯示2.

問題是，如果我然後繼續單擊「編輯」在第6行，然後是'btnAdd'，我得到兩個警報。第一個顯示2，然後是6.我只想要6.

對於第三輪，它會像2,6，然後點擊下一個。這讓我的AJAX火很多沒有。的時候，沒有。的點擊次數。

這真的很氣憤。我似乎無法弄清楚爲什麼。我是一個jQuery新手，所以請耐心等待，如果這是一個基本的東西，我搞砸了。請讓我知道如何使它只觸發一次與最新的價值，而不是它堆積在我的通話歷史？

來源

2012-09-02 Anudeep Bulla

請不要將問題標爲緊急。 http://meta.stackexchange.com/questions/6506/an-urgent-tag-for-questions-that-need-answers-within-minutes –

我會把它作爲一個點在更遠的地方。 @MattBall –

你不應該保持綁定你的添加按鈕瓦特/每個編輯點擊 - 移動到您的文檔準備好。

<script> 
    var branchId; //keep track of which branch is under edit 

    function fun(){ 
     branchId = $(this).closest("tr").find("td").eq(0).html(); 
     var branchName = $(this).closest("tr").find("td").eq(1).html(); 

     $('#branchId').val(branchId); 
     $('#branchName').val(branchName); 
    } 

    $(document).ready(function(){ 
     $("#exisBranch").on('click','.btn',fun); 

     $("#btnAdd").click(function() { 
     if($("#btnAdd").val()=='Save') { 
      alert(branchId); 
      //ajax call 
     } 
     }); 

     $("input[type='button']").click(function(e){ 
     e.preventDefault(); 
     }); 
    }); 
<script>

*您的堆棧文章中有許多錯別字。

來源

2012-09-02 05:14:15

問題是，您每次調用fun時都附加了一個新的click處理函數。這些處理者在他們開火之後不會被解僱，所以處理者正在建立。你可以使用jquery的one來確保每個事件只觸發一次。

真的，儘管如此，你的整個方法並不理想。在我的頭頂，一個可能的改進就是將ID存儲在一個數組中，然後單擊add時，處理該數組並將其清除。這將讓你只有一個處理器add以及允許批量Ajax調用，而不是每個ID一個。

來源

2012-09-02 04:30:05

綁定到動態創建的DOM元素的jQuery事件發生了錯誤

回答

相關問題