動態添加輸入框是不是動態綁定

我使用的是呼籲的document.ready從這個鏈接Jquery的輸入近代化功能： http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text 動態添加輸入框是不是動態綁定

在我的JavaScript代碼，我加入2個輸入框的DOM 。如何動態綁定這些輸入對象，以便它們展示與文檔準備就緒時存在的輸入框相同的功能。

var add= '<input type="text" size="75" placeholder="This is a Comment" id="txtComment" />' 
+ '<br /><input type="text" placeholder="2012-03-24" id="txtDate" /><br /><button id="submit">Submit</button>'; 

$(this).html(addTargetForm); 


function modernizer_init() { 
    if (!Modernizr.input.placeholder) { 

     $('[placeholder]').onfocus(function() { 
      var input = $(this); 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
       input.removeClass('placeholder'); 
      } 
     }).blur(function() { 
      var input = $(this); 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.addClass('placeholder'); 
       input.val(input.attr('placeholder')); 
      } 
     }).blur(); 
     $('[placeholder]').parents('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       var input = $(this); 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
       } 
      }) 
     }); 

    } 
}

來源

2012-03-06 Garrett

請給出綁定原始功能的代碼。 – 2012-03-06 02:02:43

請發佈您的綁定代碼。 – Eli 2012-03-06 02:03:13

添加到主要部分。 – Garrett 2012-03-06 02:35:20

這應該直接工作結構內部，而是通過各種手段把它放在一個function modernizer_init() {}如果這就是你的應用需求。

的javascript：

$("body").on('focusin', '[placeholder]', function(evt) { 
    var $input = $(evt.target); 
    if ($input.val() == $input.attr('placeholder')) { 
     $input.val(''); 
     $input.removeClass('placeholder'); 
    } 
}).on('focusout', '[placeholder]', function(evt) { 
    var $input = $(evt.target); 
    if ($input.val() == '' || $input.val() == $input.attr('placeholder')) { 
     $input.addClass('placeholder'); 
     $input.val($input.attr('placeholder')); 
    } 
}).on('submit', 'form', function(evt) { 
    var $form = $(evt.target); 
    $form.find('[placeholder]').each(function() { 
     var $input = $(this); 
     if ($input.val() == $input.attr('placeholder')) { 
      $input.val(''); 
     } 
    }); 
}); 
$('[placeholder]').focusout();

這是通過委託的focusIn（焦點）和事件的內容（模糊）的處理事件文檔正文（或者，如果你喜歡一個更本土的容器），這是jQuery的1.7 .1實施現在不贊成使用的方式bind(),.live()和.delegate()。

查看起作用：http://jsfiddle.net/wg2eX/2/

來源

2012-03-06 08:51:58

動態添加輸入框是不是動態綁定

回答

相關問題