Button click not working on dynamically created table row

Question

I've tried a few different variations of this but for some reason, none of it seems to be working for me.

I issue an ajax get and loop through the response to print rows to the html. Each row has a button to delete that element from the row.

It's a little bit lengthy, but here is that ajax get with how I run through the response to append rows to the table.

function getIEXSymbolQuote(symbol) {
                $.ajax({
                    url: IEXurlBase + "/stock/" + symbol + "/quote",
                    method: "GET",
                    success: function (data) {
                        symbol = data.symbol;
                        companyName = data.companyName;
                        change = data.change;
                        changePercent = data.changePercent * 100;
                        changePercent = changePercent.toFixed(2);
                        iexRealtimePrice = data.iexRealtimePrice;
                        iexRealtimePrice = iexRealtimePrice.toLocaleString();
                        close = data.close;
                        close = close.toLocaleString();

                        if (iexRealtimePrice === null) {

                            if (change > 0) {
                                $('#watchListItems').append("<tr id='" + symbol + "'><td><small>" + symbol + "</small></td><td style='color: #ffc107'><small>$" + latestPrice + "</small></td><td class='positive-data'><small>$" + change + "</small></td><td class='positive-data'><small>+" + changePercent + "%</small></td><td><button id ='" + symbol + "' class='btn btn-danger btn-sm removeWatchListitem'><i class='fa fa-trash'></i></button></td></tr>");
                            } else {
                                $('#watchListItems').append("<tr id='" + symbol + "'><td><small>" + symbol + "</small></td><td style='color: #ffc107'><small>$" + latestPrice + "</small></td><td style='color: red'><small>$" + change + "</small></td><td style='color: red'><small>" + changePercent + "%</small></td><td><button id ='" + symbol + "' class='btn btn-danger btn-sm removeWatchListitem'><i class='fa fa-trash'></i></button></td></tr>");
                            }

                        } else {

                            if (change > 0) {
                                $('#watchListItems').append("<tr id='" + symbol + "'><td><small>" + symbol + "</small></td><td style='color: #ffc107'><small>$" + iexRealtimePrice + "</small></td><td class='positive-data'><small>$" + change + "</small></td><td class='positive-data'><small>+" + changePercent + "%</small></td><td><button id ='" + symbol + "' class='btn btn-danger btn-sm removeWatchListitem'><i class='fa fa-trash'></i></button></td></tr>");
                            } else {
                                $('#watchListItems').append("<tr id='" + symbol + "'><td><small>" + symbol + "</small></td><td style='color: #ffc107'><small >$" + iexRealtimePrice + "</small></td><td style='color: red'><small>$" + change + "</small></td><td style='color: red'><small>" + changePercent + "%</small></td><td><button id ='" + symbol + "' class='btn btn-danger btn-sm removeWatchListitem'><i class='fa fa-trash'></i></button></td></tr>");
                            }
                        }
                        $('#watchListTable').css('visibility', 'visible');
                        $('#watchListErrBox').css('visibility', 'hidden');

                    },
                    error: function (err) {
                        $('#watchListErrBox').css('visibility', 'visible');
                    }
                })
            }

I need to be able to click on one of the trash buttons and get the id of the button clicked.

I've tried:

$("button").on("click", "button.removeWatchListitem", function () {
    event.preventDefault();
    alert($(this.id));
});

And;

$(".removeWatchListitem").on("click", function () {
    event.preventDefault();
    alert($(this.id));
});

but neither fire. This should be simple but I don't know if I'm just having a massive brain fart.

try changing `$("button").on("click", "button.removeWatchListitem", function () {` to `$(document).on("click", ".removeWatchListitem", function (event) {` — Kai Qing, Sep 11 '18 at 21:48
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Sep 11 '18 at 21:51
I think it's cause you weren't binding to the document and passing the event you were preventing default. If you get anything at all, then your event handler is working. There's tons of this same question on stack overflow so if you have a working solution now you may want to just delete this question — Kai Qing, Sep 11 '18 at 21:57
Your delegate event binding (your first "i tried" block) is on the button, which is the element that is being dynamically created. You are binding too low. You need to bind higher to a parent that already exists and is not created dynamically. Also the secondary child selector is meant to match a child of the element, and a button cannot be a child of another button. — Taplar, Sep 11 '18 at 21:57
yup. got it. console.log($(this).parent().parent().attr('id')); worked fine. — J.G.Sable, Sep 11 '18 at 22:00
Since you are appending the elements to `$('#watchListItems')`, this would be a good first place to consider attaching the delegate event listener. — Taplar, Sep 11 '18 at 22:01
Your second example doesnt work because you are trying to select a class instead of the table Id. $(".removeWatchListitem") should be $("#watchListItems"). — sphinxplayer, Sep 11 '18 at 22:03
$(this).closest('tr').attr('id') will work too, as stated in my answer. Better than hard coding parent().parent() — Steven Spungin, Sep 11 '18 at 22:12
Maybe it didnt save. It says 'If the `id` is not in the `button` element, you can use `this.closest('selector')` to get the parent element that contains it' — Steven Spungin, Sep 11 '18 at 22:14
@StevenSpungin getting the id isn't the issue here. It's that he is trying to create a binding that does not affect new elements created in an ajax call. A delegate event binding, which he tried incorrectly to do in one of his snippets, will fix that issue. — Taplar, Sep 11 '18 at 22:19
@Taplar my id retrieval was in response to > yup. got it. console.log($(this).parent().parent().attr('id')); worked fine — Steven Spungin, Sep 11 '18 at 22:21

score 0 · Answer 1 · answered Sep 12 '18 at 02:12

0

Add eventlistener to an exist div,such as body.

$(body).on('click','.removeWatchListitem',function(){...});

answered Sep 12 '18 at 02:12

gu mingfeng

1,010
8
10

Button click not working on dynamically created table row

1 Answers1