0

HTML

<a href="javascript:;">UPDATE</a>

查询

$(document).ready(function(){
  var b = '<input type="text" name="fullname"><br>'+
          '<input type="text" name="email">';
  $('a').click(function(){
    $("a ~ input, a ~ br").remove();
    $("body").append(b);
  });
  $('input').on({
    focus: function(){
      $(this).css("background","#ccc");
    },
    blur: function(){
      $(this).css("background","#fff");
    }
  });
});

.on() 事件在我动态生成输入时不起作用。

4

5 回答 5

4

那不是使用的方式.on()。它应该是这样的：

$('body').on('focus', 'input', function(){
    $(this).css("background","#ccc");
});

您必须在加载时将事件绑定到页面上已经存在的元素上。

你可以在这里了解更多。

于 2013-05-28T06:58:25.443 回答
2

利用

$(document).on("focus", "input",  function(){
      $(this).css("background","#ccc");
});
... analog for blur event

在文档中，我们找到了on()函数：

.on（事件 [，选择器] [，数据]，处理程序（事件对象））

document因此，我们将使用以下参数检测对所有输入的关注：

  • events： “重点”
  • selector： “输入”

直接和委托事件

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），并为沿该路径匹配选择器的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on(). 为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。

如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

[在文档页面上阅读更多内容]

于 2013-05-28T06:58:46.957 回答
0 
$('body').on( eventName, selector, function(){} );

检查on() 函数

例如

$("input").on("blur", function(){
   $(this).css("background","#fff");
});
于 2013-05-28T07:02:43.380 回答
0

工作 jsFiddle 演示

您.on()以错误的方式使用方法。选择器在页面中必须是静态的（而不是动态创建的），例如这body是一个很好的情况：

$('body')
    .on('focus', 'input', function () {
        $(this).css("background","#ccc");
    })
    .on('blur', 'input', function () {
        $(this).css("background","#fff");
    });

参考：

  • .on()- jQuery API 文档
于 2013-05-28T07:06:22.970 回答
-1

试试这个（未测试）：

$(document).ready(function(){
  var b = $('<input type="text" name="fullname"><br>'+
          '<input type="text" name="email">');
  b.find('input').focus(
    function(){
      $(this).css("background","#ccc");
    }).
    blur(function(){
      $(this).css("background","#fff");
    })
  );

  $('a').click(function(){
    $("a ~ input, a ~ br").remove();
    $("body").append(b);
  });
});

关键是在将处理程序插入正文之前将其添加到 b 。这避免了将处理程序添加到所有其他已插入的输入元素，并确保您只添加一次处理程序。我没有测试过它，但它应该可以工作。

编辑：我也将 on() 更改为使用 focus() 和 blur()，因为在我看来它们使用错误。但我不确定，因为我从不使用 on() 方法，也不知道使用它的所有方法。

于 2013-05-28T07:24:48.760 回答