Мой метод переноса jQuery не работает

Question

Я пытаюсь использовать обертку jQuery, но она не работает.

(function ($) { 
    $.fn.taggify = function() { 
     create(this); 
     return this; 
    }; 

    function create($theElement) { 
     var $input = $('<input></input>') 
      .attr('type', 'text') 
      .attr('autocomplete', 'off') 
      .css('border', 'none') 
      .css('outline', 'none') 
      .wrap('<li></li>'); 

     $input.on('keyup', function (e) { 
      if (e.keyCode === 13) { 
       var tagText = $input.val(); 
       var $span = $('<span class="tag-label"></span>'); 

       $span.text(tagText).wrap('<li class="tag-choice"></li>'); 
       $theElement.prepend($span); 
      } 
     }); 

     $theElement.append($input); 
    } 
})(jQuery); 

В результате до сих пор не имеет <li> тег, обернутый вокруг входа

Вот jsfiddle

http://jsfiddle.net/noppanit/sryg5fk7/1/

Answer 1

просто переместите свой код переноса после добавления элемента ввода.

DEMO

$theElement.append($input); 
$input.wrap('<li />'); 

$theElement.prepend($span); 
$span.text(tagText).wrap('<li class="tag-choice"></li>'); 

Answer 2

Как насчет использования, как это?

var $input = $('<li><input></input></li>')//wrap li here 
      .find('input')//find input and use as you want 
      .attr('type', 'text') 
      .attr('autocomplete', 'off') 
      .css('border', 'none') 
      .css('outline', 'none'); 

Я также заметил, что вы используете на метод, но это не будет работать как элемент создан динамически. Так замените эту строку:

$input.on('keyup', function (e) { 

С этим:

$(document).on('keyup', $input, function (e) { 
//you may use closest parent element instead of document 

your updated fiddle

Answer 3

Вы можете обернуть его с помощью:

(function ($) { 
    $.fn.taggify = function() { 
     var $input = $('<input />') 
      .addClass('specialInput') 
      .attr('type', 'text') 
      .attr('autocomplete', 'off') 
      .css('border', 'none') 
      .css('outline', 'none') 
      .wrap('<li />'); 

     $(this).append($input); 

     return this; 
    }; 


})(jQuery); 

$('body').on('keyup','.specialInput',function (e) { 
      if (e.keyCode === 13) { 
       $('<li class="tag-choice"><span class="tag-label">'+$(this).val()+'</span></li>').prependTo($(this).parent()); 

      } 
     }); 

Глядя на консоли, ошибка окружает пытается используйте команду .on() на элементе не DOM

Answer 4

Не совсем уверен, почему, но похоже, что вы хотите обернуть элемент, который еще не существует. Если обернуть элемент после prepend должен работать следующим образом:

$theElement.append($input); 
$input.wrap('<li></li>'); 

$theElement.prepend($span); 
$span.text(tagText).wrap('<li class="tag-choice"></li>'); 

См DEMO

р/с: Это только альтернативное решение для вашей проблемы, не знаю, почему исходный код did't работал или.