15

我正在尝试创建一个包含所有动态元素的级联下拉列表。

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

任何想法问题出在哪里？

谢谢！

4

2 回答 2

49

尝试事件委托：

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

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

事件委托有两个主要好处。首先，它允许我们绑定更少的事件处理程序，而不是我们在监听单个元素的点击时必须绑定的，这可能是一个很大的性能提升。 其次，它允许我们绑定到父元素——例如无序列表——并且知道我们的事件处理程序将按预期触发，即使该父元素的内容发生变化。

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

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

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

于 2013-01-15T21:12:22.303 回答
1

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

$(".select_class").live("change", function(){
   console.log("testing...");
});
于 2019-05-15T07:10:00.227 回答