Question

在我的ASP.NET MVC应用程序中，我有一个javascript文件，它在Scripts文件夹下的javascript文件中有一个jquery函数。该函数侦听下拉单击事件并使用所选值填充文本框，如下所示，但是当我单击下拉选项时，此方法不会被调用，并且未在文本框中设置该值。当我使用调试器（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>

Answer 1

您遇到的问题是您尝试绑定到尚不存在的元素。 ul#dropdownlistId在页面模板中静态存在，但在DOM Ready（通过您的设置功能）之后填充了li及其子项。您可以将绑定更改为绑定到始终存在的元素（ul#dropdownlistId），并仅对某些子元素（li a）执行操作：

$(function () {
    $('#dropdownlistId').on('click', 'li a', function () {
        $('#textBoxId').val($(this).text());
    });
});

我的javascript文件中的jquery函数没有被调用

1 个答案: