自定义选择下拉菜单，无法选择用户添加项目

所以我有这个自定义下拉选择，我正在建设。它有一些嵌套的项目，作为第一个选项，用户可以创建自己的项目。我已经得到它的工作，所以他们可以点击它，在那里键入，一旦他们击中输入它将被选中。我无法弄清楚的是他们创建它之后，然后他们选择了其他的东西，他们无法回去选择那个新创建的项目。希望这是有道理的。这是jsfiddle https://jsfiddle.net/johnsonjpj/18zm9kwz/2/自定义选择下拉菜单，无法选择用户添加项目

这是我用来将该添加按钮更改为输入，然后将该数据替换回列表中的脚本的一部分。

$(document).ready(function() { 


    $('body').on('click', '.addBtn', function(){ 

     var $el = $(this).parent('.newInner'); 

     var $input = $('<input type="text" class="form-control">'); 
     $input.attr('placeholder', 'Enter your category name and press "Enter"'); 
// <span class="btn btn-default btn-xs"><i class="fa fa-check" aria-hidden="true"></i></span> 
     $el.replaceWith($input); 

     var save = function(){ 
     var $p = $('<span class="catName" />').text($input.val()); 
     $input.replaceWith($p); 
     $('.category-active').removeClass('category-active'); 
     $('.addNew').removeClass('addNew').addClass('list-group-item category-active'); 
     $('#categoryPlaceholder').attr('value', $input.val()); 


     var container = $(".list-group.list-group-root"); 
     container.hide(); 
     $('.category-select').removeClass('category-open'); 

     }; 

     $input.one('blur', save).focus(); 

     $input.keypress(function (e) { 
      var key = e.which; 
      if(key == 13) // the enter key code 
       { 
       save(); 
       } 
     }); 

    }); 
});

所有帮助非常感谢。谢谢！

来源

2016-11-16 Jacob J

当文档已经加载第一次将功能$('.catName').on('click', function() {...}添加到所有类别。这是处理选择的功能，没有它你不能点击任何项目，对吗？

您使用on('click'...)的方式是所谓的直接绑定，仅适用于当前对象。

因此，此功能适用于当时所有现有的项目。因此，当用户将新项目添加到列表中时，此新项目缺少此功能，因此无法选择。

为了解决这个问题，你需要通过改变

$('.catName').on('click', function() {

添加delegated-binding，而不是你做的

$('body').on('click','.catName', function() {

来源

2016-11-16 15:04:04 Cleared

很好，谢谢你的解释。这是有道理的，现在我读了它。 –

你需要使用事件代表团，这样的事件会绑定到动态添加元素

您需要更改

$('.catName').on('click', function() {

这个

$('body').on('click','.catName', function() {

工作小提琴： https://jsfiddle.net/x2m54gjj/

来源

2016-11-16 15:03:46 Deep

欢迎您这里是事件委派HTTPS文件：//learn.jquery .com/events/event-delegation/ – Deep

非常感谢，你摇滚！ –

自定义选择下拉菜单，无法选择用户添加项目

回答

相关问题