Javascript 显示表中的隐藏行

我正在使用一些基于以下内容的代码。其目的是在用户单击“show Extra”链接时显示更多信息

我遇到的问题是，当在表的所有行上单击链接时，隐藏元素会短暂显示，然后关闭

我正在使用javascript中的模板字符串填充我的表。以下是我用于向表中添加行的代码：

this.addRecordToTable = function(bet, index, id){
console.log(index);
console.log($.data(bet));
var butId = id.toString();

if (bet.bookies == null){
    bet.bookies = "";
}

if (bet.bet == null){
    bet.bet = "";
}

var newRow = `
<tr>
    <td>${bet.date}</td>
    <td>${bet.bookies}</td>
    <td>${bet.profit}</td>
    <td><button id=${butId}>Delete</button></td>
    <td><a href=\"#\" id=\"show_${index}\">Show Extra</a></td>
</tr>
<tr>
    <td colspan=\"5\">
        <div id=\"extra_${index}\" style=\"display: none;\">
            <br>hidden row
            <br>hidden row
            <br>hidden row
        </div>
    </td>
</tr>
`



console.log(newRow);
console.log("#"+butId);

$(newRow).appendTo($("#betTable"));
$("#"+butId).click(
    function()
    {
        if (window.confirm("Are you sure you want to delete this record?")) 
        {
            var rec = new Records();
            rec.removeRecordAt(index);
            $("#betTable tbody").remove();
            var c = new Controller();
            c.init();
        }

    });

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
});

this.addRecordToTable=函数（下注、索引、id）{
控制台日志（索引）；
console.log（$.data（bet））；
var butId=id.toString（）；
if（bet.bookies==null）{
bet.bookies=“”；
}
如果（bet.bet==null）{
bet.bet=“”；
}
var newRow=`
${bet.date}
${bet.bookies}
${bet.profit}
删除

隐藏行

隐藏行

隐藏行
`
console.log（newRow）；
console.log（“#”+butId）；
$（newRow）.appendTo（$（“#betTable”）；
$（“#”+butId）。单击(
函数（）
{
if（window.confirm（“是否确实要删除此记录？”））
{
var rec=新记录（）；
记录删除记录（索引）；
$（“#betTable tbody”）.remove（）；
var c=新控制器（）；
c、 init（）；
}
});
$（[a[id^=show_u3;]）。单击（函数（事件）{
$（“#额外的”+$（this）.attr（'id'）.substr（5））.slideToggle（“慢”）；
event.preventDefault（）；
});

}

编辑：

我必须更改

$（“a[id^=show\”）。单击
到
$（“a[id=show\”+索引）。单击…
，因为每次我添加新元素时都会将事件处理程序添加到每个元素。感谢@freedomn-m.
此代码：

$("a[id^=show_]")

向每个现有链接以及新链接添加一个新的事件处理程序，因为它不是特定于ID/上下文的，所以所有show
a
都与选择器匹配

您需要添加上下文（
newRow
）或使用现有变量作为已定义循环的一部分，例如：

$("a[id^=show_]", newRow)
$("a#show_" + index)

（或任何其他有效的变更）


另一种方法是对动态添加的元素甚至使用委托，例如：

$(document).on("click", "a[id^=show_]", function...

在这种情况下，您只需定义/调用一次事件，它将被激发用于新元素（即将其置于新行循环之外）。
请创建一个问题的工作示例，以便我们可以更好地帮助您（在代码段中共享所有相关代码）您最好尝试在不使用模板的情况下创建此代码。如果成功，您可以回过头来查找模板生成的代码与工作代码之间的差异。由于您已经有了工作代码，您应该能够查看模板生成的内容，以了解为什么它没有生成相同的代码。
$（“a[id^=show.”）
-此代码向每个现有链接以及新链接添加一个新的事件处理程序，因为它不是特定于id的，并且所有的
a
都与选择器匹配。这也是使用“toggle”而不是“show”的问题。更改为
$（[id^=show.”，newRow）
或
$（“a#show.+${index}+”）
添加一个
警报
或
控制台。在
a
中记录
，单击处理程序查看调用它的时间。我实际上已更改为
$（[a[id=show_”+index）。单击
它现在可以工作了。谢谢。