【发布时间】：2013-01-19 08:07:42
【问题描述】：
我有this working code，它为尚未拥有它的浏览器添加了占位符功能：
$(document).ready(function() {
//show placeholder text when browser doesn't support placeholder attribute
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(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('');
}
});
});
}
});
问题是如果我用占位符动态添加字段，上面的代码不会显示它们。 FF 显示新的占位符，但 IE 不显示。我的理解是，如果我希望 jQuery 监视当前和未来的 DOM 元素，我需要使用 .delegate()。所以我尝试如下重写我的函数。这是jsFiddle。不幸的是，新版本既不作用于现有的也不是动态添加的占位符。我做错了什么？
$(document).ready(function() {
if(!Modernizr.input.placeholder){
$('form').delegate('[placeholder]','focus',function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).delegate('[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('');
}
});
});
}
});
【问题讨论】：
-
除了使用并非所有浏览器都支持的弃用功能或使用
setInterval之外，没有其他方法可以有效地跟踪向页面添加新元素的时间。我建议将这段代码抽象为一个函数，并在将新元素添加到页面时在目标元素而不是[placeholder]上运行它。.delegate在这种情况下不会帮助你。 -
@KevinB：这是一个简单的解决方案！我不清楚为什么没有办法有效地跟踪新元素。是不是因为标准是属性而不是元素？
-
DOMMutationEvents 的最大问题是它们的效率非常低，并且可能会导致性能问题，因为它触发的事件比您通常需要的多得多。检查新元素是否存在的 setInterval 稍微好一点，但仍然需要在每次迭代时运行
$()，这是一个很大的浪费。解决这个问题最有效的方法是在添加新元素时自己运行代码。