我使用的插件允许我使用带有扩展部分的表格，这些表格会在点击时显示更多内容。
虽然该插件正在运行，但我正在尝试调整一段代码并且无法完全正确。
整行上有一个点击事件，如果我的行包含一个链接，它会导航到链接以及扩展不需要的行的行。我想只在点击扩展箭头时才会发生点击事件。
$('.table-expandable').each(function() {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
// This is the event that is linked to the whole table row
table.children('tbody').children('tr').filter(':even').click(function() {
var element = $(this);
element.next('tr').toggle('slow');
element.find(".table-expandable-arrow").toggleClass("up");
});
table.children('tbody').children('tr').filter(':even').each(function() {
var element = $(this);
element.append('<td><div class="table-expandable-arrow"></div></td>');
});
});
我尝试在事件中添加另一条逻辑，但这不起作用：
table.children('tbody').children('tr').filter(':even').find('.table-expandable-arrow').click(function() {
我可以尝试将箭头作为触发而不是整行的任何想法？
更新：
<tr class="primaryValue ">
<td class="small"><a target="_BLANK" href="tool.php?tool=30">30</a></td>
<td class="small">Quickload</td>
<td class="small">Web</td>
<td class="small">John Doe</td>
<td class="small"><a href="mailto:john@test.com">john@test.com</a></td>
<td class="small">Omaha</td>
<td class="small">123456</td>
<td class="small">N/A</td>
<td>
<div class="table-expandable-arrow"></div>
</td>
</tr>
答案 0 :(得分：1)
您的代码存在的问题是，当您搜索.table-expandable-arrow时 - 您的DOM中仍然没有此元素（此元素仅在此调用之后创建）。
相反 - 您可以更改代码，以确保在创建元素期间将click事件附加到arrow。
以下是一个例子：
(function ($) {
$(function () {
$('.table-expandable').each(function () {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
table.children('tbody').children('tr').filter(':even').each(function () {
var element = $(this);
arrowElement = $('<div class="table-expandable-arrow"></div>')
arrowElement.on('click', function () {
$(this).parents('tr').next('tr').toggle('slow');
$(this).toggleClass("up");
});
td = $('<td></td>').append(arrowElement)
element.append(td);
});
});
});
})(jQuery); table.table-expandable > tbody > tr:nth-child(odd) {
cursor: auto !important;
}
.table-expandable-arrow {
cursor: pointer;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/css/bootstrap-table-expandable.css">
<div class="container">
<h1 style="margin-top:150px;">jQuery Bootstrap Table Expandable Demo</h1>
<table class="table table-hover table-expandable table-striped">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul></td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official Yearbook of the United Kingdom</a></li>
</ul></td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240 km2</td>
<td>Hindi, English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
</ul></td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
</ul></td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
</ul></td>
</tr>
</tbody>
</table>
请注意，我还添加了一些css更改，以确保当您将整个行悬停时光标未设置为
pointer，但仅限于箭头。