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-div）填充widget-sel，然后为该选择创建一个更改处理程序，只需打印“Hello ！”通过alertbox到屏幕。

当我运行这个时，我没有得到任何错误（Firebug根本没有抱怨），并且选择了从我的所有小部件填充来自AJAX调用/myServer/getAllWidgets。 问题是，更改处理程序无法正常工作：当我选择一个小部件时，我没有得到警告框。任何人都可以找到我要去的地方吗？提前谢谢。

Answer 1

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

为了解决这个问题，你可以使用.on()方法（jQuery 1.7+，如果你可以在这种情况下使用父div）将事件处理程序委托给更高的DOM树（看起来你可以使用父.delegate()）如果您使用的是旧版本，请使用$("#widget-sel-div").on("change", "#widget-sel", function () { alert("Hello!"); });代码：

{{1}}

Answer 2

这是由于AJAX调用的异步性质。 {AJ}调用完成之前将执行change处理程序，因此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!");
 });

jQuery不会调用警告框

2 个答案: