-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”是对应的行号。

当我第一次单击第二行的“编辑”按钮，然后单击“btnAdd”时，会弹出一个正确显示 2 的警报。

问题是，如果我继续单击第 6 行的“编辑”，然后单击“btnAdd”，我会收到两个警报。第一个显示 2，然后是 6。我只想要 6。

对于第三轮，它就像 2,6，以及接下来点击的内容。这让我的 AJAX 火了很多。次作为没有。点击次数。

这真是令人生气。我似乎无法弄清楚为什么。我是一个 jQuery 新手，所以如果这是基本的东西并且我搞砸了，请多多包涵。请让我知道如何让它只用最新的值触发一次，而不是堆积在我的调用历史上？

4

2 回答 2

0

The problem is that you are attaching a new click handler each time that fun is called. These handlers are not unbound after they fire, so the handlers are building up. You could use jquery's one to ensure that each event fires only once.

Really though, your entire approach is not ideal. Off the top of my head, one possible improvement which wouldn't take too much re-engineering would be to store the IDs in an array, then when add is clicked, process the array and clear it. This would let you only have one handler on add as well as allow for batch ajax calls instead of one per id.

于 2012-09-02T04:30:05.280 回答
0

您不应该通过每次编辑单击来绑定您的添加按钮——将其移出到您的文档准备就绪。

<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-02T05:14:15.343 回答