按鈕刪除動態創建的DOM元素點擊

Question

我創建一個表從數據庫中提取數據，這是院系

<div class="accord"> 
    <?php 
     foreach($collegename as $clglist) 
    { ?> 

     <table class="table table-bordered"> 
      <thead class="head"><tr><th><h3><?php echo $clglist['college_name']; ?></h3></th> 
        <th><button id='clgname-<?php echo $clglist['college_id']; ?>'>delete</button></th></tr> </thead> 
      <tbody> 
      <?php 

        foreach($departmentname as $deptlist) 
        { 

      ?> 
      <tr><td> <?php 
          echo $deptlist['dept_name'].'<br>'; 
         ?> 
         </td> <td> <button id='deptname-<?php echo $deptlist['dept_id']; ?>'>delete</button></td></tr> 
         <?php 
        } 
       ?> 
       </tbody>  
     </table> 

     <?php   
    } 
?> 
</div> 

當點擊大學名稱，顯示部門名稱的列表。我使用jQuery的切換功能。

$(document).ready(function(){ 
jQuery(document).ready(function(){ 
    $('.accord .table .head').click(function() { 
     $(this).next().toggle(); 
     return false; 
    }).next().hide(); 
}); 

$("#clgname-<?php echo $clglist['college_id']; ?>").on("click", function() { 
     alert("testing"); 
    }); 

我要添加刪除功能所以點擊刪除按鈕的部門名稱旁邊的每一行部門行應該從表中刪除的時候。但是，當我點擊按鈕時沒有任何事情發生。我試圖創建一個警告消息，也是失敗的。我確信我犯了一些錯誤，可能無法識別我動態分配的每個按鈕的ID。任何人都可以請看看，並告訴我在這裏做什麼：

Answer 1

花費一些時間閱讀了關於HTML Dom遍歷的內容。我終於找到了我的問題的答案。我在html中做了一些修改。

<div class="accord"> 
    <?php 
     foreach($collegename as $clglist) 
    { ?> 

     <table class="table table-bordered"> 
      <thead class="head"><tr> 
       <th><h3><?php echo $clglist['college_name']; ?></h3></th> 
       <td><button value='<?php echo $clglist['college_id'];?>'>delete</button></td> 
       </tr> </thead> 
      <tbody> 
      <?php 

        foreach($departmentname as $deptlist) 
        { 

      ?> 
      <tr><td> <?php 
          echo $deptlist['dept_name'].'<br>'; 
         ?> 
         </td> 
         <td> <button value='<?php echo $deptlist['dept_id']; ?>'>delete</button></td></tr> 
         <?php 
        } 
       ?> 
       </tbody>  
     </table> 

     <?php   
    } 
?> 
</div> 

第一個函數刪除大學的所有部門，第二個函數刪除每一行中的各個部門。最後一個功能是切換。

jQuery的解決方案：

$(document).ready(function() { 

$('table tbody').hide(); 

$(document).on('click', '.accord .table .head tr td button', function(event){ 
     event.preventDefault();  
     var row = $(this).val(); 
     /*saved the college id to search & delete from database*/ 
     alert('College id is ' + row);  
    $(this).parent().parent().parent().next().remove(); 
}); 

$(document).on('click', '.accord .table tbody tr td button', function(event){ 
     event.preventDefault(); 
     var row = $(this).val(); 
     /*saved the department id to search & delete from database*/ 
     alert('You clicked ' + row); 
    $(this).parent().parent().remove(); 
}); 

$(document).on('click', '.accord .table .head', function(event) { 
     event.preventDefault(); 
     $(this).next().toggle(); 
    }); 

}）;

Answer 2

您需要改用以下內容：

//$ is replaceable with jQuery 
$(document).on('click', '.accord .table .head', function(){ 

//Do stuff here 

}); 

這是你處理動態創建的DOM元素的方式。

Answer 3

假設只有一個按鈕下方head標籤：

$('.accord .table .head button').on('click', function() { 
    console.log('delete ' + this.id) 
    $(this).parents('table').first().remove() 
}) 

您可以現場檢查代碼中https://jsfiddle.net/ks4ejz97/

如果你有一個以上的button，我建議使用額外的類如： btn-delete

Answer 4

jQuery on函數可以在非靜態元素被加載到DOM之前將事件附加到非靜態元素。看看這個代碼。

$(document).ready(function(){ 
 
\t 
 
\t $('.table').on('click', '.toggle-departements, .delete-departement', function(theEvent){ 
 
\t \t 
 
\t \t var whosTheGuilty = $(theEvent.currentTarget); 
 
\t \t if(whosTheGuilty.attr('class') == 'toggle-departements'){ 
 
\t \t \t 
 
\t \t \t $('.fresh-departement').toggle(); 
 
\t \t \t alert('toggled'); 
 
\t \t } 
 
\t \t else if(whosTheGuilty.attr('class') == 'delete-departement'){ 
 
\t \t \t $('.fresh-departement').hide(); 
 
\t \t \t alert('hidden (You can also delete ;-)'); 
 
\t \t } 
 
\t \t //.table is the static PARENT present when the page is loaded that you will attach your dynamic content event. And as you see, the click event is attached to .toggle-departements 
 
\t \t //And you can toggle now 
 
    
 
\t \t 
 
\t \t 
 
\t }); 
 
\t 
 
\t //Content loaded after event 'click' declaration 
 

 
\t var dynContent = '<thead class="head"><tr><th><h3>Fresh College</h3></th><th><button class="toggle-departements">Toggle</button></th></tr></thead><tbody><tr class="fresh-departement"><td>Fresh Departement</td<td><button class="delete-departement" id="delete-fresh-college">Remove</button></td></tr></tbody>' 
 
\t 
 
\t $('table').append(dynContent); \t 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accord"> 
 
\t <table class="table table-bordered"> 
 
<!-- Empty Table content will Dynamically loaded here --> 
 
\t </table> 
 
</div>

編輯：根據您的要求;您現在可以檢測到觸發事件並刪除等的按鈕...