0

在我的 ASP.NET MVC 应用程序中，我有一个 javascript 文件，它在 Scripts 文件夹下的 javascript 文件中有一个 jquery 函数。该函数侦听下拉单击事件并用所选值填充文本框，如下所示，但是当我单击下拉选项时，此方法不会被调用，并且该值未在文本框中设置。当我使用调试器（F12）运行时，如果我将函数粘贴到调试器命令行中，然后单击下拉菜单就可以了！！！！不知道为什么该方法没有从 javascript 文件中注册。下拉菜单和输入文本框是使用引导输入组创建的。下拉列表最初是空的，并通过从 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 就绪后填充（通过您的设置函数）。您可以将绑定更改为绑定到始终存在的元素 ( ul#dropdownlistId) 并仅作用于某些子元素 ( li a)：

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