-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を介して取得した2番目のテーブルレコードにデータを入力します。各行には、「branchId」、「branchName」、およびクラス「bt」の2つのボタンがあります。編集ボタンをクリックすると、対応する「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」をクリックすると、すべて正常に動作します。問題は、このボタンを2回目以降にクリックすることから始まります。動的に入力されるコンテンツには6つの行があり、各行の「branchId」が対応する行番号であると考えてください。

最初に2行目の[編集]ボタンをクリックしてから[btnAdd]をクリックすると、アラートが正しくポップアップ表示され、2が表示されます。

問題は、6行目の[編集]をクリックしてから[btnAdd]をクリックすると、2つのアラートが表示されることです。最初のものは2、次に6を示しています。私は6が欲しいだけです。

第3ラウンドでは、2,6のようになり、次にクリックされたものは何でもかまいません。これは私のAJAXを多くの人に火をつけさせています。としての時間の。クリック数。

これは本当に腹立たしいです。理由がわからないようです。私はjQueryの初心者なので、これが基本的なものであり、それを台無しにした場合は、我慢してください。呼び出しの履歴に積み重なるのではなく、最新の値で1回だけ起動する方法を教えてください。

4

2 に答える 2

0

click問題は、が呼び出されるたびに新しいハンドラーをアタッチしていることですfun。これらのハンドラーは、起動後にバインドが解除されないため、ハンドラーが構築されています。jqueryoneを使用して、各イベントが1回だけ発生するようにすることができます。

しかし、実際には、アプローチ全体が理想的ではありません。頭から離れて、リエンジニアリングをあまり必要としない1つの可能な改善は、IDを配列に格納し、[追加]をクリックしたときに、配列を処理してクリアすることです。これにより、ハンドラーを1つだけオンにaddすることができ、IDごとに1つではなく、バッチajax呼び出しを実行できます。

于 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 に答える