Ajax调用不适用于动态添加的内容

Question

我之前已成功完成了ajax调用，因为这种情况形式如下：

• 用户选择＆＃39;类别＆＃39;从选择框中的列表。选择完成后会激活Ajax，这会更新 second 选择框，其中包含与所选类别相关的所有项目。

由于answer found here，我知道如何成功地做到这一点。

我现在正在做的是使用nested_form_fields gem动态添加新的嵌套表单字段。这是一个快照：

因此，每当用户选择＆＃34;添加服务＆＃34;时，nested_form_fields gem会生成一个新的嵌套表单，其中包含两个选择框（service category选择框和{{1}如上图所示选择框）。

工作正常。我遇到的问题是当用户选择service provided时，会针对此动态内容触发ajax请求。

当用户选择service category时，我想发送一个ajax调用，该调用会更新第二个选择框，其中包含与service category相关的所有服务。

问题是ajax请求根本没有启动。当用户选择service category时，服务器未收到任何请求。我认为问题在于，由于这些嵌套字段是动态生成的，因此javascript没有机会将ajax请求绑定到新的嵌套字段＆＃39; service category选择框。

这是我的javascript：

service category

我想如果我每次在页面中的html发生变化时都能运行这个javascript（例如：当添加新的嵌套表单字段时），那么javascript将能够将该ajax调用绑定到新的{{ 1}}选择框。

Answer 1

只有一个元素可以拥有id，所以你需要用类引用它。事件委托将捕获新元素。由于你没有给出HTML结构，我必须保留找到第二个选择泛型的答案。

$(document).on("change", ".service_category_selection", function () {
    var select = $(this);

    $.ajax({
        url: "narrow_service_by_service_category_selection",
        type: "GET",
        data: {service_category_id: $(this).val()},
        success: function (data) {
            var secondSelect = select.closest("parentElementSelector").find(".classForNextSelect");
        }
    });

});

Answer 2

您应该能够使用委托事件处理程序而不是直接处理程序。只需改变

$("#service_category_selection").on('change', function...

到

$('body').on('change', '#service_category_selection', function...

您可以在jQuery文档中阅读更多相关信息：

https://api.jquery.com/on/#direct-and-delegated-events

HTH！