更改时未触发动态内容的jQuery

小编典典

更改时未触发动态内容的jQuery

ajax

我正在尝试使用所有动态元素创建一个层叠下拉列表。

我的HTML：

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

我有2个使用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。

知道哪里出了问题吗？

谢谢！

阅读 241

2020-07-26

共1个答案

小编典典

尝试 事件委派 ：

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

事件冒泡的行为使我们可以执行“事件委托” — 将处理程序绑定到高级元素，然后检测哪个低级元素启动了事件。

事件委托有两个主要好处。首先，它允许我们 绑定的事件处理程序 少于侦听单个元素的点击所需要 绑定的事件处理程序 ，这可以
大大提高性能 。其次，它允许我们 绑定到父元素 （例如无序列表），并且知道我们的事件处理程序将按
预期方式触发，即使该父元素的内容发生更改也是如此。

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

委派事件的优势在于， 它们可以处理来自后代元素的事件 ， 这些事件以后会添加到文档中。
通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。
例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是Model-View-
Controller设计中视图的容器元素，也可以是文档。在加载任何其他HTML之前，document元素在文档的开头可用，
因此可以安全地在其中附加事件，而无需等待文档准备就绪。

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

2020-07-26