将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 : '');
   }
  });

 });

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

- Q Studio

Answer 1

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

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

- karim79

---

10/10 - 速度非常快！- 这是我的第一篇帖子 - 我该如何给你打分？ - Q Studio

补充一下，input[type=text] 可以简写成 input:text，其中的 :text 是一个伪选择器。 - karim79

希望你不介意我改用.on()方法来代替现在已经弃用的方法。 - JJJ

Answer 2

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

此外，您还可以使用 .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 : '');
        }
    });
 });

- James Sumners