jquery on blur не работает для динамического текстового поля

Question

Я вижу всевозможные ответы онлайн, но ни один из них, похоже, не работает для меня.

Это для нашей локальной интрасети. Я добавляю данные в форму динамически, когда пользователь нажимает кнопку. У меня есть события фокуса/размытия, но они не улавливают фокус и размывают динамически созданные текстовые поля. Я использую .on для размытия/фокуса, но он все еще не работает, как мне кажется. Я попытался добавить «input [type = text]» в .on функцию как селектор, но это тоже не работает. Я также попытался дать входные данные классу и использовать это вместо ввода [type = text], но он все равно не будет работать.

Я использую размытие/фокус, чтобы ввести значения по умолчанию, чтобы пользователь знал, для чего предназначен текстовое поле. Я знаю html5 placeholder, но это не будет работать на IE9, который есть у некоторых наших компьютеров.

jsfiddle example

HTML

<div id="details" class="miSections relative"> 
     <div class="sectionHeader relative">Details<button id="detailButton" class="newButton" type="button">Add Another Detail</button></div> 
      <table id="detailsTable" class="infoTable">     
       <tr> 
        <td><input type="text" name="detDate_1" id="detDate_1" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td> 
       </tr>      
      </table> 
    </div> 

CSS

.infoTable{ 
    text-align: center; 
    width:100%; 
    } 
    .defaultText{ 
    color: #a1a1a1; 
    font-style: italic; 
    } 

Javascript

$(document).ready(function() { 
     $('.textarea').on('focus', function() { 
      //using .on('focus','.textarea',function() doesn't work 
      if ($(this).val() == $(this).attr('title')) { 
       $(this).removeClass('defaultText'); 
       $(this).val(""); 
      } 
     }); 

     $('.textarea').on('blur', function() { 
      if ($(this).val() == "" || $(this).val() == $(this).attr('title')) { 
       $(this).addClass('defaultText'); 
       $(this).val($(this)[0].title); 
      } else { $(this).removeClass('defaultText'); } 
     }); 

     //fire the blur events to populate the inputs with default values 
     blurIt(); 

     $('#detailButton').on('click', function() { 
      $('#detailsTable tr:last-child').after('><tr><td><input type="text" name="detDate_2" id="detDate_2" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td></tr>'); 

      blurIt(); 
      countIt(); 
     }); 
    }); 
    function blurIt(){ 
    $('.textarea').blur(); 
    } 
    function countIt(){ 
    var inputs = $('.textarea').length; 
    console.log(inputs); 
    } 

Answer 1

событий синтаксис делегации Использование .on() «s.

Изменение:

$('.textarea').on('focus', function() { 
//and 
$('.textarea').on('blur', function() { 

к:

$(document).on('focus', '.textarea', function() { 
//and 
$(document).on('blur', '.textarea',function() { 

jsFiddle example

Обратите внимание, что вы могли бы получить некоторую эффективность при использовании $('#details') вместо $(document) в моем примере.