0

私の ASP.NET MVC アプリケーションには、Scripts フォルダーの下の JavaScript ファイルに jquery 関数を持つ JavaScript ファイルがあります。関数はドロップダウン クリック イベントをリッスンし、以下のように選択した値でテキスト ボックスを埋めますが、ドロップ ダウン オプションをクリックすると、このメソッドは呼び出されず、値はテキスト ボックスに設定されません。デバッガー (F12) で実行するときに、関数をデバッガーのコマンド ラインに貼り付けると、ドロップダウンをクリックすると機能します!!!! メソッドが javascript ファイルから登録されていない理由がわかりません。ドロップダウン メニューと入力テキスト ボックスは、bootstrap input-group を使用して作成されます。ドロップダウンは最初は空で、setup() 関数でファイルから読み取ることによって入力されます。

// In test.js
var testMap = {}

$(function () {
    $("#dropdownlistId li a").click(function () {
        var name = $(this).text();
        $("#textBoxId").val(name);
    });
});

function setup() {
    // Read name and value pair in testMap
    ...
    // Append names to drop down list
    $.each(testMap, function (key, value) {
            $("#dropdownlistId").append("<li> <a tabindex=\"-1\" href=\"#\"> " + key + "</a>  </li>");
    });
}

$(document).ready(function () {
    setup();
});

私のcshtmlファイルでは、次のようにjavascriptファイルを呼び出しています。

@section Scripts {
    @Scripts.Render("~/scripts/test.js") 
}

<div class="col-md-3">
    <div class="input-group">
        <input id="textBoxId" type="text" class="form-control" placeholder="Enter name" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul id="dropdownlistId" class="dropdown-menu pull-right"></ul>
        </div>
    </div>
</div>
4

1 に答える 1

3

まだ存在しない要素にバインドしようとしているという問題が発生しています。はul#dropdownlistIdページ テンプレートに静的に存在しますが、liとその子は DOM Ready の後に (セットアップ関数を介して) 取り込まれます。バインディングを変更して、常に存在する要素 ( ) にバインドし、ul#dropdownlistId特定の子要素 ​​( li a)にのみ作用するようにすることができます。

$(function () {
    $('#dropdownlistId').on('click', 'li a', function () {
        $('#textBoxId').val($(this).text());
    });
});
于 2013-11-14T20:19:49.967 に答える