0

在我的主视图中，我有一个添加按钮。单击添加按钮会显示局部视图。

主文件.cshtml

<div id="NameCats">
    @Html.Partial("_Temp")
</div>

<div class="row">
    <button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
    Add Info
</div>

在我的 Temp 部分视图中，我有多个引导输入下拉组。

_Temp.cshtml

<div id="info">
    <div class="well">
        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <input id="name" type="text" class="form-control dropdown-text" />
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul id="nameList" class="dropdown-menu pull-right">
                            <li> <a tabindex="-1" href="#"> Test1 </a> </li>
                            <li> <a tabindex="-1" href="#"> Test2 </a> </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="input-group">
                    <input id="cat" type="text" class="form-control dropdown-text" />
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul id="catList" class="dropdown-menu pull-right"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

从第一个下拉列表中选择一个项目应使用所选值填充该下拉列表的输入。这是我的 javascript 使其工作。问题是当我从最初呈现的下拉列表中选择项目时，单击 (li a) 功能有效，但是当我单击添加按钮然后尝试在此新信息部分中重复选择下拉列表时，单击 ( li a) 功能未命中。我究竟做错了什么？

$(function () {
    $('.dropdown-menu').each(function () {
        $(this).on('click', 'li a', function () {
            $(this).parents(".input-group").find('.dropdown-text').val($(this).text());
        });
    });
});

$(function () {
    $('#addInfo').click(function (e) {
        e.preventDefault();
        $('#NameCats').append($("#info").html());
    });
});
4

1 回答 1

1

问题是您新添加的元素没有click与之关联的处理程序，因为添加处理程序的功能仅在页面加载时运行。你有事件冒泡的概念，但是在错误的父元素上，这基本上只关注新li a元素而不是整个dropdown-menu被添加。

将您的第一个函数更改为以下内容，这将对元素dropdown-menu中添加的任何内容保持“监视” #NameCats。

$(function () {
    $('#NameCats').on('click', '.dropdown-menu li a', function () {
        $(this).parents(".input-group").find('.dropdown-text').val($(this).text());
    });
});

这是一个jsFiddle 工作示例。

于 2013-11-15T01:08:19.327 回答