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

Question

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

我的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.

任何想法问题在哪里？

谢谢!

Answer 1

尝试事件委派:

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

事件的冒泡行为允许我们执行"事件委托" - 将处理程序绑定到高级元素,然后检测哪个低级元素启动了事件.

活动授权有两个主要好处.首先,它允许我们绑定比我们必须绑定更少的事件处理程序,如果我们听取单个元素的点击,这可以是一个很大的性能增益. 其次,它允许我们绑定到父元素 - 例如无序列表 - 并且知道我们的事件处理程序将按预期触发,即使该父元素的内容发生更改.

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

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档.在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪.

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