0

我有以下内容：

<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-div框（widget-sel通过警报框到屏幕。

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

4

2 回答 2

5

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

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

$("#widget-sel-div").on("change", "#widget-sel", function () {
    alert("Hello!");
});
于 2012-12-06T14:18:15.553 回答
2

这是由于 AJAX 调用的异步特性。该change处理程序将在 AJAX 调用完成之前执行，因此 DOM 中没有元素可以绑定到它。相反，将 放置change在 AJAX 回调中：

$.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!");
        }
    }
);

或者，您可以将change处理程序留在原处，并将事件侦听器委托给静态父元素，如下所示：

 $('#widget-sel-div').on('change', '#widget-sel', function() {
      alert("Hello!");
 });
于 2012-12-06T14:19:31.570 回答