如何在动态生成元素jquery上添加click事件 [英] how to add click event on dynamically generate element jquery
本文介绍了如何在动态生成元素jquery上添加click事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在表格行的动态ID上添加点击事件.我已将行ID设置为表的每一行.现在，我想添加单击事件以在切换中显示一行(class ="hidden")slidedown.实际上，表格行将使用经典的ASP代码通过循环进行打印.
I was try to add click event on dynamical ID's on a table row. I have set row ID to each row of a table. Now I want to add click event to show a row (class="hidden")slidedown in toggle. Actually the table row will print through a loop using classic asp code.
<table id="bus-list" class="table table-bordered table-result">
<thead style="background-color: #FCA04E">
<tr>
<th>Bus Operator</th>
<th>Bus Type</th>
<th>Depart</th>
<th>Arrive</th>
<th>Duration</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-condensed table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
这是我设置行 ID 的 jquery 代码:
Here is my jquery code to set row id:
$(document).ready(function(e) {
var counter = 0;
$("#bus-list tbody tr.hidden").each(function(){
counter++;
var newdivid = 'bus-more-div-' + counter;
$(this).attr('id',newdivid);
});
var bCount = 0;
$("#bus-list tbody tr.display td button[name='selectBus']").each(function(){
bCount++;
var newid = 'btn-viewMore-' + bCount;
$(this).attr('id',newid);
var dd = $(this).attr('id');
$('#btn-viewMore-' + bCount).on('click',function(){
});
});
我无法添加点击事件按钮来显示隐藏请帮我.
I faild to add click event button to show hide the Please help me.
推荐答案
您真的不需要所有这些，只需切换所单击按钮的下一个同级键即可.
You really don't need all that, you can just toggle the next tr sibling of the clicked button
$('.btn-select').click(function() {
$(this).closest('tr').next('tr').toggleClass('display hidden')
}).hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="bus-list" class="table table-bordered table-result">
<thead style="background-color: #FCA04E">
<tr>
<th>Bus Operator</th>
<th>Bus Type</th>
<th>Depart</th>
<th>Arrive</th>
<th>Duration</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-condensed table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>这篇关于如何在动态生成元素jquery上添加click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
