Question

我正在尝试向我的jquery表添加一个动作链接，以便我可以导航到另一个页面。这就是我试过的

var $row = $("<tr>", { class: "info" }).prop('id', id);
                                $row.append($("<td>").html(item.name));
                                $row.append($("<td>").html(item.code));
                                $row.append($("<td>").html(item.shortName));
                                $row.append($("<td>").html(item.squadMarketValue));
                                $row.append($("<td>").html(item.crestURL));
                                $row.append($("<td>").html(id));
                                $row.append($('<td><a href="/Leagues/Edit/"' + id + '"></a></td>'));
                                $row.appendTo($('#teamsTable'));

出现一个小小区，但点击它不会做任何事情。

Answer 1

点击<a>标记内没有任何内容。点击根本不会激活<a>标记，因为标记甚至不会显示在视图中。您需要有一些东西才能显示<a>标记。所以添加一些东西以便在DOM中显示它。

$row.append($('<td><a href="/Leagues/Edit/"' + id + '">Edit</a></td>'));
// ----------------------------------------------------^^^^

致谢：epascarello＆＃39; s comment。

Answer 2

您可以将jQuery on事件处理程序用于动态内容例如：

var item = {
  name: "Lala Land",
  code: "123",
  shortName: "land",
  squadMarketValue : "Lala",
  crestURL : "google.com"
}

var id='table-row';

var $row = $("<tr>", {
  class: "info"
}).prop('id', id);

$row.append($("<td>").html(item.name));
$row.append($("<td>").html(item.code));
$row.append($("<td>").html(item.shortName));
$row.append($("<td>").html(item.squadMarketValue));
$row.append($("<td>").html(item.crestURL));
$row.append($("<td>").html(id));
$row.append($('<td><a href="/Leagues/Edit/' + id + '">Click me</a></td>'));
$row.appendTo($('#teamsTable'));

$('#'+id).on('click' , 'a', function(e){ 
  e.preventDefault();
  console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id='teamsTable'>
  <tr class="info"></tr>
</table>

如何向jquery表添加操作链接？

2 个答案: