jquery 模糊不适用于动态文本框

Question

我在网上看到了各种各样的答案，但似乎没有一个对我有用。

这是我们本地 Intranet 的。当用户单击按钮时，我会动态地将输入添加到表单中。我有焦点/模糊事件，但它们没有在动态创建的文本框上吸引焦点和模糊。我正在使用 .on 进行模糊/聚焦，但它仍然无法按照我认为的方式工作。我尝试将“input[type=text]”添加到 .on 函数作为选择器，但这也不起作用。我还尝试为输入提供一个类并使用它而不是 input[type=text] 但它仍然不起作用。

我使用模糊/焦点来输入默认值，以便用户知道文本框的用途。我知道 html5 占位符，但它在 IE9 上不起作用，而我们的一些计算机仍然有 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()的事件委托(delegate)语法。

更改:

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

至:

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

<强> jsFiddle example

请注意，在我的示例中使用 $('#details') 而不是 $(document) 可能会提高一些效率。