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

按钮单击不适用于动态创建的表行

1 个答案: