.live() and .data()

Question

我正在尝试制作一段JavaScript，允许我添加具有特定类的<input>，并且它会自动添加类似占位符的行为。问题是，我通过AJAX加载了一些输入。我使用.live()方法来解决这个问题，但是.data()不想玩。

下面是一个例子:

jQuery

$(".placeHolder").data("originalValue", $(this).val());
$(".placeHolder").live("focus", function() {
    if($(this).val() == $(this).data("originalValue"))
    {
        $(this).val('');
    }
});
$(".placeHolder").live("blur", function() {
    if(!$(this).val().length)
    {
        $(this).val($(this).data("originalValue"));
    }
});
// Load inputs into an element
$("selector").load("loadInput.php", function(response, status, xhr) {
    $(".placeHolder").data("originalValue", $(this).val());
});

HTML

<input type="text" name="foo" value="Bar" class="placeHolder">

问题是<input>的原始值没有被.data()存储在任何地方-甚至在.post()调用中。页面上可以有多个.placeHolder。

我使用.data()不正确吗?如果不是，还有什么地方出了问题?

Answer 1

@ jaulde有一个点…

$(".placeHolder").data("originalValue", $(this).val());

应该是这样吗?

$(".placeHolder").each(function(){
  $(this).data("originalValue", $(this).val());
});

Answer 2

.live()在document元素上放置了一个事件处理程序，该处理程序使用事件冒泡来捕获事件，并检查它们是否来自适当的源。.data()将数据附加到现有元素。您使用live()是因为您通过AJAX加载数据，并且无论<input>元素何时出现，它都可以工作。但data()不是这样工作的。

如果你使用的是最新版本的jQuery，你可以使用HTML5 data-属性，并使用data()处理程序访问它们。