Making same jquery work for drop downs in dynamically rendered partial views

Question

In my main view, I have an add button. Clicking the add button brings in a partial view.

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>

In my Temp partial view, I have multiple bootstrap input drop down groups.

_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>

Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?

$(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());
    });
});

Answer 1

The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.

Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.

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

Here is a jsFiddle working example .