15

すべての動的要素を含むカスケード ドロップダウンを作成しようとしています。

私のHTML：

 <select id="Sites" name="SelectedSiteId"><option value=""></option></select>
 <select id="Sectors" name="SelectedSectorId"><option value=""></option></select>

ajaxを使用して要素をロードする2つの関数があり、どちらも正常に機能しています:

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);  
});

イベントのバブリング動作により、「イベント委任」を行うことができます 。つまり、ハンドラーを高レベルの要素にバインドし、どの低レベルの要素がイベントを開始したかを検出します。

イベント委任には 2 つの主な利点があります。まず、個々の要素のクリックをリッスンする場合にバインドする必要があるイベント ハンドラーよりも少ない数のイベント ハンドラーをバインドできるため、パフォーマンスが大幅に向上します。 次に、順序付けされていないリストなどの親要素にバインドできるため、親要素の内容が変更された場合でも、イベント ハンドラーが期待どおりに起動することがわかります。

出典: http://jqfundamentals.com/chapter/events

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

から取得: http://api.jquery.com/on/

于 2013-01-15T21:12:22.303 に答える