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

Question

所以我要建立這個自定義下拉列表。 它在那里有一些嵌套項目，並且作為第一個選項，用戶可以創建自己的項目。 我已經開始使用它，因此他們可以單擊它，在其中鍵入內容，一旦按下它們，它將被選中。 我不知道的是他們創建完之后，然后又選擇了其他東西，無法回頭選擇該新創建的項目。 希望這是有道理的。 這是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();
              }
        });   

    });
});

非常感謝所有幫助。 謝謝！

Answer 1

您需要使用事件委托，以便將事件綁定到動態添加的元素

你需要改變

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

對此

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

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

Answer 2

首次加載文檔時，將函數$('.catName').on('click', function() {...}到所有類別。這是處理選擇的函數，沒有它，您可以無法單擊任何項​​目，對嗎？

您使用on('click'...)是所謂的直接綁定，僅適用於當前對象。

因此，該功能將同時應用於所有現有項目。 因此，當用戶將新項目添加到列表時，該新項目缺少此功能，因此無法選擇。

要解決此問題，您需要添加委托綁定，而您可以通過更改

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

至

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