Question

我正在使用基于以下JSFiddle的代码。目的是在用户单击“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();
});

}

编辑：

我必须将$("a[id^=show_]").click更改为$("a[id=show_"+index).click...，因为每次添加新元素时都会将事件处理程序添加到每个元素中。感谢@ freedomn-m。

Answer 1

此代码：

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

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

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

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

（或任何其他有效的变体）。

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

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

在这种情况下，你只需要定义/调用一次事件，它就会被新元素触发（即把它放在新的行循环之外）。

在表

1 个答案: