0

私のメイン ビューには、追加ボタンがあります。追加ボタンをクリックすると、部分ビューが表示されます。

Main.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.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 に答える