Question

I have this markup.

   <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>

What basically happens is I populate the second table records retrieved through AJAX. Each row has a ‘branchId’,’branchName’ and two buttons of class ‘bt’. When I click the edit button, I need the corresponding ‘branchId’ and ‘branchName’ values inserted into input elements in the first table, so that I can edit them and later, when I click the “btnAdd”, I can save them.

This is the jQuery I have.

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

Everything works fine when I click the ‘btnAdd’ for the first time. The problem starts with the second and successive clicks on this button.Consider that there are 6 rows in the dynamically populated content, and that ‘branchId’ of each row is the corresponding row number.

When I first click on ‘EDIT’ button on the 2nd row, and then the ‘btnAdd’, an alert correctly pops up showing 2.

Problem is , if I then go on to click ‘EDIT’ on the 6th row, and then the ‘btnAdd’ , I get two alerts. The first one shows 2, then 6.I just want 6.

For the third round, it goes like 2,6, and what ever is clicked next. This is making my AJAX fire as many no. of times as the no. of clicks.

This is really infuriating.I just can’t seem to figure out why. I am a jQuery novice, so please bear with me if this is something fundamental and I messed it up.Please let me know how to make it fire only once with the latest value, instead of it stacking up on my history of calls?

Answer 1

You shouldn’t keep binding your Add button w/ each Edit click–move it out to your document ready.

<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>

*you have a number of typos in your stack post.