Dynamische Textbox auf Bootrap UL - nicht in der Lage

Question

Ich habe dynamisch eine Textbox an der Unterseite der ul als Option hinzugefügt. Wenn ich versuche zu tippen, ist der Fokus verloren. Wenn ich die e.stopPropagation() entferne und die Klicks auf das Textfeld klicke, wird die Liste geschlossen. Wie kann ich in mein benutzerdefiniertes Textfeld txtCategory auf die gleiche Weise eingeben wie es im Feld "Suchen" eingeben, ohne die Liste zu schließen? Die txtCategory hat beim Laden den Wert '2'.

Here is the fiddle

Script

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

HTML

<div class="form-group"> 
     <label class="col-sm-2 control-label">Multiselect</label> 
     <div class="col-sm-10"> 
      <div id="theParentx"> 
       <select id="example-post-checkboxName" name="multiselect[]" aria-labelledby="dropdownMenu3" multiple="multiple" required> 
       </select> 
       <div id="theChildx" class="dropdown-menu"> 

       <input /> 
      </div> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" class="btn btn-default input-group-addon">Submit</button> 
     </div> 
    </div> 

Answer 1

keydown Event hinzufügen zusammen mit Klick auf Ihre dynamische textbox wie folgt:

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

Updated Fiddle Here