jquery 将焦点/模糊事件绑定到 AJAX 加载的内容

Question

我有这个脚本，可以很好地添加/删除模糊/专注于文本输入和文本区域的类 - 但是我需要将其绑定到也可以处理通过 AJAX 加载页面后添加的内容：

 $(function() {
  $('input[type=text], textarea').addClass("idleField"); // reset all ##
  $('input[type=text], textarea').bind("focus", function(event){
      $(this).removeClass("idleField").addClass("focusField");
      if (this.value == this.defaultValue){ 
       this.value = '';
   }
   if(this.value != this.defaultValue){
       this.select();
      }
  }).bind("blur", function(event){
   $(this).removeClass("focusField").addClass("idleField");
      if ($.trim(this.value) == ''){
       this.value = (this.defaultValue ? this.defaultValue : '');
   }
  });

 });

这不会将事件绑定到新内容- 有什么想法吗？

Answer 1

不要使用 .bind，而是使用 .on() ：

$( document ).on( 'focus', 'input[type=text], textarea', function() {
    // stuff here will be applied to present and *future* elements
});

Answer 2

.bind() 方法适用于当前存在的元素。要将事件处理程序附加到 DOM 中当前存在的元素以及将来可能存在的任何元素，您应该使用 .live() 方法。如果您不希望事件一直冒泡，您还可以使用 .delegate() 方法到 DOM 的顶部。

此外，您可以使用 .toggleClass() 方法在一次函数调用中切换元素上的类。因此，您的代码将是：

$(function() {
    $('input[type=text], textarea').addClass("idleField"); // reset all ##  
    $('input[type=text], textarea').live("focus", function(event){
        $(this).toggleClass("focusField idleField");
        if (this.value == this.defaultValue) { 
           this.value = '';
        }
        if (this.value != this.defaultValue) {
           this.select();
        }
    }).live("blur", function(event){
        $(this).toggleClass("focusField idleField");
          if ($.trim(this.value) == ''){
           this.value = (this.defaultValue ? this.defaultValue : '');
        }
    });
 });