ダイナミックテーブル内のボタンは、一度だけJQuery関数を実行します

Question

このテーブルのデータベースからPHPドラッグデータを使用してwhileループを使用してテーブルを作成しています。

HTML：

<div id="divCenter" class="box"> 
    <div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;"> 
     <img src="../../images/logo.png" width="142" height="33"> 
    </div> 
    <div id="mainDiv"> 
     <div id="navi"></div> 
     <div id="infoi"></div> 
     <table id="hor-minimalist-b"> 
      <div id="bgDimmer"></div> 
      <div id="divContent"></div> 
      <thead> 
      <tr> 
       <th scope="col">ID</th> 
       <th scope="col">First Name</th> 
       <th scope="col">Last Name</th> 
       <th scope="col">Team</th> 
       <th scope="col">Created By</th> 
       <th scope="col">Created Date</th> 
       <th scope="col"></th> 
       <th scope="col"></th> 
      </tr> 
      </thead> 
      <tbody> 
      <?php while ($row = $getUsersQuery -> fetch(PDO::FETCH_ASSOC)) { ?> 
       <tr> 
        <td id="uId"><?php echo $row["uId"]; ?></td> 
        <td id="fName"><?php echo $row["fName"]; ?></td> 
        <td id="lName"><?php echo $row["lName"]; ?></td> 
        <td id="team"><?php echo $row["uTeam"]; ?></td> 
        <td id="cBy"><?php echo $row["createdBy"]; ?></td> 
        <td id="uCd"><?php echo $row["uCreateDate"]; ?></td> 
        <td><input type="button" name="uEdit" id="uEdit" value="Edit" /></td> 
        <td><a href="deleteUser.php?id=<?php echo $row["uId"] ?>"><input type="button" name="uDelete" id="uDelete" value="Delete" /></a></td> 
       </tr> 
      <?php } ?> 
      </tbody> 
     </table> 
    </div> 
</div> 

私の編集ボタンがポップアップをトリガーするjQueryの機能で注目されています。

はJQuery：

$(document).ready(function() { 
    $('#uEdit').click(function(){ 
     $('#bgDimmer').toggle(); 
     $('#divContent').toggle().load('editUser.php'); 
    }); 
}); 

問題は、テーブルを描画するときにのみ、最初の行の編集ボタンが機能を実行することである私は、私は本当に避けたいと、この作業を取得するためのonclickを追加する必要がありますが、必要ならば私はそうするでしょう。

私の質問には、私の質問が明確になっていることがあります。

Answer 1

idの値は一意であり、繰り返されないので、ボタンのクラスを使用することをお勧めします。

<td><input type="button" class="buttonClassName" name="uEdit" id="uEdit" value="Edit" /></td> 

とjQuery：ボタンで代わりにIDの

$(document).ready(function() { 
    $('.buttonClassName').click(function(){ 
    $('#bgDimmer').toggle(); 
    $('#divContent').toggle().load('editUser.php'); 
    }); 
}); 

Answer 2

は、このコード

$(document).ready(function() { 
    $(document).on('click','#uEdit',function(){ 
     $('#bgDimmer').toggle(); 
     $('#divContent').toggle().load('editUser.php'); 
    }); 
}); 

Answer 3

を試してみてください私はあなたの問題は、あなたが自分のIDとしてuEditで複数の要素を生成しているという事実にあると思います。あなたは特定のIDのためにあなたのページに1つの要素しか持たないようにしてください。 idsの代わりにクラスを使用して同じことを試してください

Answer 4

id = "uEdit"をclass = "uEdit"に変更して、コードを$（ '。uEdit'）に変更してみてください。/code}）。 Idはページ上のユニークな要素を意味します

Answer 5

使用クラス

HTML

<input type="button" name="uEdit" class="uEdit" value="Edit" /> 

のjQuery

$(document).ready(function() { 
    $('.uEdit').click(function(){ 
     $('#bgDimmer').toggle(); 
     $('#divContent').toggle().load('editUser.php'); 
    }); 
});