使用 jquery 在.each 循環中添加事件監聽器

Question

我有一個 function 從 api 獲取一些數據：

aggregate_products.aggregate(products_to_aggregate)
        .then(data => {
            let formatted_products = dynamic_products.format_products_default_value(data)
            dynamic_products.add_products_to_form(formatted_products)
        })
        .catch(error => {
            console.log(error)
        })
        .finally(function () {
            add_event_listeners_to_dynamic_products()
        })

這會在代碼中更深入地更新 DOM：

....
            $("#dynamic_products").empty()
            $(rendered).appendTo("#dynamic_products");

一切正常。 我遇到的問題是我想將事件偵聽器添加到 DOM 中呈現的新 HTML 中。 我在上面運行add_event_listeners_to_dynamic_products()的 finally() 調用中執行此操作，該調用運行以下代碼：

function add_event_listeners_to_dynamic_products() {
    $('#selected_products').find('.btn-danger').each(function (index, value) {
        $(value).bind("click", function (eventData) {
            console.log(eventData)
            remove_product_event(eventData)
        })
    });
}

function remove_product_event(event) {
    console.log(event)
    if (event.target.nodeName === "BUTTON") {
        dynamic_products.delete_selected_product(event.target.value)
    }
}

當我在瀏覽器中測試它時，我可以添加產品，但添加事件偵聽器的循環似乎沒有運行，並且事件處理程序沒有顯示在我的瀏覽器調試中。 奇怪的是，如果我在瀏覽器控制台中運行以下命令：

$('#selected_products').find('.btn-danger').each(function (index, value) {
    $(value).bind("click", function (eventData) {
        console.log(eventData)
    })
});

我的按鈕：

        <div class="col-auto p-0">
            <button type="button" class="btn btn-danger" value="{{uuid_val}}">
                <i class="far fa-trash-alt"></i>
            </button>
        </div>

編輯更新新工作按鈕：

<button type="button" class="btn btn-danger far fa-trash-alt" value="{{uuid_val}}"></button>

它可以找到並將單擊事件綁定到我想要綁定的按鈕。 當我單擊它們時，它們還會將事件數據打印到控制台。 我一生都無法弄清楚為什么add_event_listeners_to_dynamic_products()不起作用？

總體而言，我基本上試圖根據我從 api 調用中獲得的數據動態地將一些產品添加到表單中。 我還添加了一個按鈕來刪除單個產品。

Answer 1

我建議您查看事件委托

本質上，您希望注冊一個不依賴於正在填充的內容（例如使用循環）的事件處理程序，而不是為所有執行相同操作的每個項目創建一個新的事件處理程序（並要求它們存在於DOM 綁定/取消綁定事件處理程序）。

就像是：

$("#selected_products").on("click", ".btn-danger", function(event) {
    console.log($(this).text(), event);
});