javascript - jQuery 不调用警报框

Question

我有以下内容:

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $.getJSON(
            "/myServer/getAllWidgets",
            function(data) {
                var optionsHTML = "<select id='widget-sel'>";
                optionsHTML += "<option selected='selected' id='default'>Select an option</option>";
                var len = data.length;
                for(var i = 0; i < len; i++) {
                    optionsHTML += '<option value="' + data[i] + '">'
                        + data[i] + '</option>';
                }

                optionsHTML += "</select>";

                $('#widget-sel-div').html(optionsHTML);
            }
        );

        $("#widget-sel").change(function() {
            alert("Hello!");
        });
    });
</script>

<div id="widget-sel-div"></div>

因此，我们的想法是，当 document.ready 触发时，它会使用选择框 (widget-sel) 填充 widget-sel-div code>)，然后为该选择创建一个更改处理程序，仅打印“Hello!”通过警报框显示到屏幕。

当我运行这个程序时，我没有收到任何错误(Firebug 根本不提示)，并且选择会填充来自对 /myServer/getAllWidgets 的 AJAX 调用的所有小部件。 问题是，更改处理程序不起作用:当我选择一个小部件时，我没有收到警报框。有人能发现我哪里出了问题吗？提前致谢。

Answer 1

在代码运行时，DOM 中不存在 #widget-sel 元素，因为您将其添加到 getJSON 的回调中(即异步)。当事件处理程序尚不存在时，您无法将其绑定(bind)到它。

为了解决这个问题，您可以使用 .on() 将事件处理程序委派到 DOM 树的更高层(在这种情况下，您可以使用父 div)。方法(jQuery 1.7+，如果您使用的是旧版本，请使用 .delegate() 代替):

$("#widget-sel-div").on("change", "#widget-sel", function () {
    alert("Hello!");
});