動態表內的按鈕執行JQuery函數只有一次

我創建了一個使用PHP從表中的數據庫拖動數據的while循環表我有2個按鈕之一刪除另一個是用於編輯。動態表內的按鈕執行JQuery函數只有一次

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得到這個工作，我真的很喜歡避免的，但如果需要，我會的。

希望我的問題很清楚，可以讓我瞭解一些問題。

來源

2017-04-27 Sand

而不是使用元素的id（因爲id必須是唯一的，不能重複），我會建議使用一個類的按鈕。

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

和Jquery的：

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

來源

2017-04-27 07:14:54

謝謝你向我展示我做錯了什麼。但是爲什麼@Bhupesh代碼與編輯HTML一起工作？ – Sand

歡迎您！事實上'$（'＃uEdit'）。click（function（）{}）;'這會爲每個匹配選擇器的單個元素創建單獨的處理程序。在這種情況下，它將停止在ID爲「uEdit」的第一個元素（處理程序將只爲ID爲「uEdit」的第一個元素創建，其餘的將被忽略）。 '$（document）.on（'click'，'＃uEdit'，function（）{}）;'這會爲與您的選擇器匹配的所有元素創建一個處理程序。因此，無論何時單擊id =「uEdit」的元素，它都會調用該函數。 –

謝謝你解釋我所不知道的東西。 – Sand

試試這個代碼

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

來源

2017-04-27 07:04:03

它的工作可以告訴我我做錯了什麼。 – Sand

我認爲你的問題就在於，你是生成與uEdit多個元素作爲其ID。您應該只在頁面上有一個元素用於特定的ID。嘗試使用類而不是ids的類別

來源

2017-04-27 07:06:15

您可以嘗試將id =「uEdit」更改爲class =「uEdit」，然後將代碼修改爲$（'。uEdit'）。click（function（）{//code}）。 Id意味着頁面上的獨特元素

來源

2017-04-27 07:14:54

使用類而不是ID按鈕

HTML

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

jQuery的

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

來源

2017-04-27 07:18:10

動態表內的按鈕執行JQuery函數只有一次

回答

相關問題