CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 4050

Showing Hidden Row in Table

I am using some code based on the following JSFiddle. The intention is to show more information when the user clicks the "Show Extra" link.

The problem that I'm having is that when the link is clicked on all but the bottom row of the table the hidden element is shown briefly and then closes.

I am populating my table using template strings in javascript. Here is the code that I use to add rows to the table:

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();
});

}

EDIT:

I had to change $("a[id^=show_]").click to $("a[id=show_"+index).click..., as the event handler was being added to each element every time I added a new element. Thanks to @freedomn-m.

Upvotes: 0

Views: 64

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

This code:

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

adds a new event handler to every existing link as well as the new one as it's not ID/context specific so all the show a's match the selector.

You need to add the context (newRow) or use the existing variable(s) as part of the loop that are already defined, eg:

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

(or any other variation that works).

An alternative would be to use even delegation for the dynamically added elements, eg:

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

in which case you'd only need to define/call the event once and it would be fired for new elements (ie put that outside the new row loop).

Upvotes: 1

Related Questions