Question

我正在尝试使用所有动态元素创建级联下拉列表。

我的Html：

 <select id="Sites" name="SelectedSiteId"><option value=""></option></select>
 <select id="Sectors" name="SelectedSectorId"><option value=""></option></select>

我有两个使用ajax加载元素的函数，两者都正常工作：

function GetSites() {
        $.ajax({
            url: '/Sites/GetSites',
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sites").html(items);
            }
        });
    }

    function GetSectors(siteId) {
        $.ajax({
            url: '/Sites/GetSectors',
            data: { siteId: siteId },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sectors").html(items);
            }

        });
    }

我需要根据网站选择调用GetSectors。我有这个：

$(document).ready(function () {                       
        $("#Sites").on("change", function (e) {
            var siteId = $("#Sites").val();
            GetSectors(siteId);                
        });

        GetSites();
    });

但它不起作用。我正在使用jquery 1.8.3。

任何想法问题在哪里？

谢谢！

Answer 1

尝试活动委派：

$(document).on("change", "#Sites", function(){
    var siteId = this.value;
    GetSectors(siteId);  
});

事件的冒泡行为允许我们做“事件委托” -   将处理程序绑定到高级元素，然后检测哪些   低级元素发起了这一事件。

活动授权有两个主要好处。首先，它允许我们绑定   如果我们正在听，我们必须绑定的事件处理程序更少   点击各个元素，可以获得巨大的业绩增长。   第二，它允许我们绑定到父元素 - 例如无序   list - 并且知道我们的事件处理程序将按预期触发，即使   该父元素的内容发生了变化。

取自：http://jqfundamentals.com/chapter/events

委托事件的优势在于可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。这个 element可以是a中视图的容器元素例如，模型 - 视图 - 控制器设计，或者如果事件是文档 handler希望监视文档中的所有冒泡事件。该文档元素在之前的文档头部中可用加载任何其他HTML，所以没有安装事件是安全的等待文件准备好。

取自：http://api.jquery.com/on/

Answer 2

对于动态添加内容的绑定更改功能，我遇到了同样的问题。我用这个解决了。希望它可以帮助某人^^

const transform = (input) => input.areas
  .map(({ name, services }) => ({
    name,
    services: services.filter(({ selected }) => selected)
  }))
  .filter(({ services }) => services.length);

const input = {
   "areas": [
      {
         "name": "area 1",
         "services": [
            {
               "label": "srv 1",
               "selected": true
            },
            {
               "label": "srv 2",
               "selected": false
            },
            {
               "label": "srv 3",
               "selected": false
            },
            {
               "label": "srv 4",
               "selected": true
            }
         ]
      },
      {
         "name": "area 2",
         "services": [
            {
               "label": "srv 1",
               "selected": false
            },
            {
               "label": "srv 2",
               "selected": true
            },
            {
               "label": "srv 3",
               "selected": false
            },
            {
               "label": "srv 4",
               "selected": false
            }
         ]
      },
      {
         "name": "area 3",
         "services": [
            {
               "label": "srv 1",
               "selected": false
            },
            {
               "label": "srv 2",
               "selected": false
            },
            {
               "label": "srv 3",
               "selected": false
            }
         ]
      },
      {
         "name": "area 4",
         "services": [
            {
               "label": "srv 1",
               "selected": true
            },
            {
               "label": "srv 2",
               "selected": false
            },
            {
               "label": "srv 3",
               "selected": true
            }
         ]
      }
   ]
};
console.log(transform(input));

关于动态内容的更改没有触发的Jquery

2 个答案: