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が入力され、その選択の変更ハンドラーが作成され、単に "Hello!" と出力されるという考え方です。アラートボックス経由で画面に。widget-sel-divwidget-sel

これを実行すると、エラーは発生せず (Firebug はまったく文句を言いません)、select には 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呼び出しの非同期性によるものです。ハンドラーはchangeAJAX呼び出しが完了する前に実行されるため、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 に答える