按鈕單擊不適用於動態創建的表行

Question

我已經嘗試了幾種不同的方法，但是由於某種原因，這些方法似乎都不適合我。

我發出ajax get並循環響應以將行打印到html。 每行都有一個按鈕，用於從行中刪除該元素。

這有點冗長，但這是ajax通過我如何將響應追加到表中而得到的結果。

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

我需要能夠點擊垃圾桶按鈕之一，並獲得點擊按鈕的ID。

我試過了：

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

和;

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

但是都沒有開火。 這應該很簡單，但是我不知道我是否正在放屁。

Answer 1

將eventlistener添加到現有的div，例如body。

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