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

您需要使用以下内容：

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

//Do stuff here

});

这是处理动态创建的DOM元素的方式。

Answer 2

假设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 3

jQuery on函数可以在将事件加载到DOM之前将事件附加到非静态元素。看看这段代码。

＆＃13;

$(document).ready(function(){
	
	$('.table').on('click', '.toggle-departements, .delete-departement', function(theEvent){
		
		var whosTheGuilty = $(theEvent.currentTarget);
		if(whosTheGuilty.attr('class') == 'toggle-departements'){
			
			$('.fresh-departement').toggle();
			alert('toggled');
		}
		else if(whosTheGuilty.attr('class') == 'delete-departement'){
			$('.fresh-departement').hide();
			alert('hidden (You can also delete ;-)');
		}
		//.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
		//And you can toggle now
   
		
		
	});
	
	//Content loaded after event 'click' declaration

	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>'
	
	$('table').append(dynContent);	
 
})

＆＃13;

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

＆＃13;

编辑：按照您的要求;您现在可以检测到触发事件的按钮并删除等...

Answer 4

花了一些时间阅读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();
    });

}）;

按钮单击时删除动态创建的dom元素

4 个答案: