Javascript 如何在动态创建的链接中导航？

因此，我有一个HTML表格，其中动态填充了

元素。这些元素是一个链接，但我不知道如何浏览它们

我的HTML：

<div id="catalog-page" data-role="page">
        <!-- catalog header -->
        <div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
            <a href="#home-page" data-role="button" data-inline="true">Back</a>
            <h1>Pokémon Catalog</h1>
        </div>
        <!-- /catalog header -->

        <div data-role="content">
            <h1>Gotta catch em all!</h1>


            <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">

                <tr>
                    <th>Name</th>

                </tr>

            </table>

        </div>

神奇宝贝目录
一定要抓住他们！
名称

我的JS文件：

$(document).on("pageshow", "#catalog-page", function() {
console.warn("catalog-page loaded");
$.ajax({
    url: "http://pokeapi.co/api/v2/pokemon/"
}).then(function(data) {
    console.warn("Found " + data.count + " pokemon...");
    console.warn(JSON.stringify(data.results));

    var obj = data.results;
    drawTable(obj);

    function drawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i], i);
        }
    }

    function drawRow(rowData, c) {
        var row = $("<tr />")
        $("#table-column-toggle").append(row);
        row.append($("<td><a href=#pokemon"+c +">" + rowData.name + "</a></td>"));
    }

});
});

$（文档）。在（“页面显示”，“目录页”，函数（）上）{
console.warn（“已加载目录页”）；
$.ajax({
url:“http://pokeapi.co/api/v2/pokemon/"
}).then（功能（数据）{
console.warn（“找到”+data.count+“口袋妖怪…”）；
console.warn（JSON.stringify（data.results））；
var obj=数据。结果；
牵引台（obj）；
函数绘图表（数据）{
对于（变量i=0；i

其结果如下：

Bulbasaur的id为口袋妖怪0、ivysaur口袋妖怪1等

问题是，如果我单击Bulbasaur，我希望页面加载一个新div。在这个div中，我希望提供有关Bulbasaur的信息。我使用jquerymobile动态加载div

在我的HTML代码中：

<div id="pokemon0" data-role="page">
        <div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
            <a href="#catalog-page" data-role="button" data-inline="true">Back</a>
            <h1>Here comes the name of the pokemon</h1>

        </div>
</div>

口袋妖怪的名字来了

这是可行的，但正如您所看到的，我已经编写了id=“pokemon0”，但这不是我想要的方式，因为否则我必须创建811 div

---

长话短说，有没有办法将id=“pokemon0”更改为我正在单击的任何链接（例如id=“pokemon12”）？

您只需要一个具有通用id的div

<div id="pokemon" data-role="page">

---

参见工作示例。顺便说一下，创建811个表行需要很长时间。

您可以添加与

关联的JS代码吗？使用

.load（）

使用AJAX动态加载描述。

$("a[href^='#pokemon']").click(function(){
  $('#pokemon h1').html($(this).text());
});