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'...)的方式是所谓的直接绑定，仅适用于当前对象。

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

要解决此问题，您需要添加delegated-binding，而不是通过更改

来添加{{3}}

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

到

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

自定义选择下拉列表，无法选择用户添加的项目

2 个答案: