Question

我有一个登录表单，其中包含简单的文本框，显示文本“密码”。当用户点击该框时，即在焦点事件上，我将文本框html替换为密码框html，具有相同的id，与其他所有内容相同。

但是，在此更改之后，焦点事件不再对密码框起作用，即使它具有相同的ID。我需要做额外的事吗？像绑定功能到密码框。请告诉我如何使用一些代码片段。感谢。

这是我的代码：

$(".login_fields input")
  .focus(function (e) {
      $(this).parent().html('<input type="password" value="" id="admin_password">');
      $(this).val('');
  })

Answer 1

尝试使用live而不是bind，因为绑定后添加了元素，它没有附加事件处理程序：

$('#myTextBox').live('click', function() {
  // Live handler called.
});

以下是参考资料：

http://api.jquery.com/live/

这是一个可能的解决方案：

$(".login_fields input").live("focus", function(){
      $(this).parent().html('<input type="password" value="" id="admin_password">');
      $(this).val('');
});

Answer 2

.live()是最简单的解决方案，但它也是性能最差的！当您使用.live（）时，它意味着您向所有发生的点击添加了一个事件监听器，并检查该点击是否在您的输入上。不推荐。

您可以使用.delegate()只收听输入所在文档的某个部分。 delegate与live相同，适用于注入元素

 $('.login_fields').live('.login_fields input', 'click', function() {
  // your code
});

DCS：http://api.jquery.com/delegate/

jQuery，将focus方法绑定到动态输入元素

2 个答案: