動態創建的文本輸入不會調整寬度

Question

一個簡單的問題，我試圖根據用戶輸入自動調整輸入文本字段的大小，我對動態創建的輸入文本有一些問題，而其他人正在運行。

這裏是JavaScript，我使用：

<script> 
(function($){ 
     $.fn.autoGrowInput = function(o) { 

      o = $.extend({ 
       maxWidth: 1000, 
       minWidth: 0, 
       comfortZone: 70 
      }, o); 

      this.filter('input:text').each(function(){ 

       var minWidth = o.minWidth || $(this).width(), 
        val = '', 
        input = $(this), 
        testSubject = $('<tester/>').css({ 
         position: 'absolute', 
         top: -9999, 
         left: -9999, 
         width: 'auto', 
         fontSize: input.css('fontSize'), 
         fontFamily: input.css('fontFamily'), 
         fontWeight: input.css('fontWeight'), 
         letterSpacing: input.css('letterSpacing'), 
         whiteSpace: 'nowrap' 
        }), 
        check = function() { 

         if (val === (val = input.val())) {return;} 

         // Enter new content into testSubject 
         var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
         testSubject.html(escaped); 

         // Calculate new width + whether to change 
         var testerWidth = testSubject.width(), 
          newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, 
          currentWidth = input.width(), 
          isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) 
               || (newWidth > minWidth && newWidth < o.maxWidth); 

         // Animate width 
         if (isValidWidthChange) { 
          input.width(newWidth); 
         } 

        }; 

       testSubject.insertAfter(input); 

       $(this).bind('keyup keydown blur update', check); 

      }); 

      return this; 

     }; 

    })(jQuery); 

    $('input').autoGrowInput(); 

</script> 

這是我創建的文本輸入字段：

   var tracktitleinput = document.createElement('input'); 
       tracktitleinput.setAttribute('type', "text"); 
       tracktitleinput.setAttribute('name', "tracktitle"); 
       tracktitleinput.setAttribute("required", true); 
       tracktitleinput.setAttribute("placeholder", 
         "Required Field"); 
       tracktitleinput.setAttribute("class", "required"); 

並將其與此的人完全不工作：

<input type="text" id="releasename" name="releasename" required="true" placeholder="Required Field" /> 

Answer 1

如果他們不存在，當你打電話$('input').autoGrowInput();我不知道你爲什麼期望他們有這個功能屬於他們。 jQuery並不神奇，它不會自動知道當你加載的頁面應用於那些不存在的元素時你運行的代碼，除非你明確告訴它（並且只能通過事件委託對事件起作用） 。

創建動態添加元素時，你需要再次打電話給你的插件：

$(tracktitleinput).autoGrowInput(); 

Answer 2

當你創建新的投入，你需要調用這些元素的autoGrowInput()功能：

var $newInput = $('<input/>', { 
    type : 'text', 
    name : 'tracktitle', 
    required : 'true', 
    placeholder : 'Required Field', 
    class : 'required' 
}).autoGrowInput();