Boostrap UL上的动态文本框 - 无法输入

Question

我已将动态文本框动态添加到ul的底部作为选项。当我尝试输入内部时，焦点丢失了。如果我删除e.stopPropagation()并使用文本框上的点击次数，则列表会关闭。 如何在我的自定义文本框txtCategory内输入，就像它允许在“搜索”框中键入而不关闭列表一样？ <{1}}加载时值为'2'。

Here is the fiddle

脚本

txtCategory

HTML

<script type="text/javascript">
   var customOption = "<li class='multiselect4-item multiselect-filter' value='0'><div class='input-group'><input class='xxx' id='txtCategory' value='2'><input type='button' id='btnAddOption' value='Add'></div></li>";
    $(document).ready(function () {
        //$("#theChildx").hide();

            $('#example-post-checkboxName').multiselect({
                enableFiltering: true,
                enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true,
        includeSelectAllOption: true,
        onDropdownShow: function (select, container) {
            //var siz = parseInt($('#theParentx').height(),5) + parseInt($('#theParentx .multiselect-container').height(), 10) + parseInt($('#theChildx').height(),7);
            //var w = $('#theParentx .multiselect-container').width();
            //$('#theChildx').css({ 'top': siz + "px", 'width': w }).show();
        },
        onDropdownHide: function (event) {
            //$("#theChildx").hide();
        },
                templates: {
                divider: '<li class="multiselect-item divider"></li>',
                liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
                }
            });

            var data = [{
                title: 'First group',
                children: [{ label: 'Cheese', value: 'cheese' , selected: true},
                           { label: 'Tomatoes', value: 'tomatoes', selected: false, "attributes": {"some-attribute": 1, "another-attribute": false } }]
            }, {
                title: 'Second group',
                children: [{ label: 'Mozzarella', value: 'mozzarella' },
                           { label: 'Mushrooms', value: 'mushrooms' }]
            }];

            $("#example-post-checkboxName").multiselect('dataprovider', data);
            $('.dropdown-menu').append(customOption);
        //add actions on dynamically created button
            $('.dropdown-menu').on("click", "#txtCategory", function (e) {
                e.stopPropagation();
            });
            $('.dropdown-menu').on("click", "#btnAddOption", function () {
               // alert('clicked');
                var theValue = '<option>' + $('#txtCategory').val() + '</option>';
                //$('#txtCategory').val();
                $('#example-post-checkboxName').append(theValue);
                $('#example-post-checkboxName').multiselect('rebuild')
                {
                    $('.dropdown-menu').append(customOption);
                    alert('ok');
                };
                return false;
            });
    });

</script>

Answer 1

添加keydown个活动，点击动态textbox，如下所示：

$('.dropdown-menu').on("keydown click", "#txtCategory", function (e) {
      e.stopPropagation();
});

<强>

的 Updated Fiddle Here