.live（）和.data（）

Question

我正在尝试创建一个允许我添加<input>某个类的JavaScript，它会自动为其添加类似占位符的行为。问题是，我通过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

@JAAulde有一点......

$(".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()处理程序访问它们。