自定義選擇下拉菜單，無法選擇用戶添加項目

所以我有這個自定義下拉選擇，我正在建設。它有一些嵌套的項目，作爲第一個選項，用戶可以創建自己的項目。我已經得到它的工作，所以他們可以點擊它，在那裏鍵入，一旦他們擊中輸入它將被選中。我無法弄清楚的是他們創建它之後，然後他們選擇了其他的東西，他們無法回去選擇那個新創建的項目。希望這是有道理的。這是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

非常感謝，你搖滾！ –

自定義選擇下拉菜單，無法選擇用戶添加項目

回答

相關問題