.live () и .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

@ 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().