Jquery 标记到元素时未激发textarea上的委派焦点事件

我有一些文本区域，其中包含一些通过AJAX加载的占位符文本。我希望文本在焦点上消失，因此我将焦点事件委托给一个类。如果单击textarea，则会触发focus事件，如果单击/切换到其他输入元素，也会触发focus事件。但当我用tab键指向文本区域时，它不起作用。这种行为在所有浏览器中都是一致的。这就是我正在做的

$('#forms-container').delegate('.hasInstructions', 'focus', clearInstructions)

hasInstructions

是带有占位符文本的输入元素上的类

当我将事件直接绑定到下面的文本区域时，它工作得很好

<textarea class="hasInstructions" onfocus="clearInstructions()">foo</textarea>

foo

所以我的问题是，关于文本区域的焦点事件不是冒出来了吗？如果是这样，我能实现这一目标的最佳方式是什么

编辑：我知道在问完问题后，用这种方式来改变这个问题并不是很好。MikeD的回答对原始问题完全有效，如果没有更好的答案，我会接受。事情是这样的

---

我使用的是jQuery 1.4.2，不能使用更高版本，因为我没有将库发送到页面。出于浏览器兼容性的原因，我不能使用HTML5占位符。

您完全正确，它不适用于代理。这很可能是由于天气原因，但这只是一个猜测。以下是一些建议的解决办法

不带jQuery

您可以使用事件捕获而不是事件冒泡来实现这一点（有关IE支持，请参阅下面的警告）

使用以下HTML

<p id='parent'>
    Enter some values:<br/>
    <input type='text' id='requiredValue'/>
    <input type='text'/>
</p>
<div id='output'>
</div>

HTML5技术

一种更好的技术，兼容HTML5。从博客：

<input type="text" name="first_name" placeholder="Your first name...">

如果用户的浏览器不支持占位符功能，您将需要使用MooTools、Dojo或您选择的JavaScript工具包：

---

您完全正确，它不适用于委托。这很可能是由于天气原因，但这只是一个猜测。以下是一些建议的解决办法

不带jQuery

您可以使用事件捕获而不是事件冒泡来实现这一点（有关IE支持，请参阅下面的警告）

使用以下HTML

<p id='parent'>
    Enter some values:<br/>
    <input type='text' id='requiredValue'/>
    <input type='text'/>
</p>
<div id='output'>
</div>

HTML5技术

一种更好的技术，兼容HTML5。从博客：

<input type="text" name="first_name" placeholder="Your first name...">

如果用户的浏览器不支持占位符功能，您将需要使用MooTools、Dojo或您选择的JavaScript工具包：

---

#表单容器

是静态元素吗？不能使用占位符属性吗？@undefined-是，表单容器是静态元素。我不能使用占位符属性，因为旧浏览器不支持占位符属性，也不能使用模拟占位符属性的jquery插件。@太快了，我已经更新了答案。看看这是否适用于您。

#forms container

是静态元素吗？不能使用占位符属性吗？@undefined-是，表单容器是静态元素。我不能使用占位符属性，因为旧浏览器不支持占位符属性，也不能使用模拟占位符属性的jquery插件。@太快了，我已经更新了答案。看看这是否适合你。谢谢你的回复，但我不能使用最新版本的jQuery。我使用的是1.4.2，也不能以浏览器不兼容的方式使用。当您确认在更高版本的jQuery中使用

on

功能时，我正在查看它是如何工作的。但所有这些都没有任何意义（可能是因为我正忙于许多其他任务）。你的答案和博客链接都非常有用。非常感谢您的回复，但是我不能使用最新版本的jQuery。我使用的是1.4.2，也不能以浏览器不兼容的方式使用。当您确认在更高版本的jQuery中使用

on

功能时，我正在查看它是如何工作的。但所有这些都没有任何意义（可能是因为我正忙于许多其他任务）。你的答案和博客链接都非常有用。非常感谢你。

$(document).ready(function() {
    var initialText = "Enter a value";
    $('.requiredValue').val(initialText);

    $('#parent').on('focus', '.requiredValue', function() {
        var contents = $(this).val();
        if (contents === initialText) {
            $(this).val("");
        }
    });

    $('#parent').on('blur', '.requiredValue', function() {
        var contents = $(this).val();
        if (contents.length == 0) {
            $(this).val(initialText);
        }
    });
});

<input type="text" name="first_name" placeholder="Your first name...">

function hasPlaceholderSupport() {
    var input = document.createElement('input');
    return ('placeholder' in input);
}

/* mootools ftw! */
var firstNameBox = $('first_name'),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
    focus: function() {
        if(firstNameBox.value == message) { searchBox.value = ''; }
    },
    blur: function() {
        if(firstNameBox.value == '') { searchBox.value = message; }
    }
});