Динамически добавленное поле ввода не динамически связывается

Question

Я использую функцию модернизатора Jquery Input, вызываемую в document.ready по этой ссылке: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

В моем коде JavaScript я добавляю 2 поля ввода для DOM. Как я могу динамически связать эти объекты ввода, чтобы они обладали той же функциональностью, что и поле ввода, существовавшее, когда документ был готов.

var add= '<input type="text" size="75" placeholder="This is a Comment" id="txtComment" />'
+ '<br /><input type="text" placeholder="2012-03-24" id="txtDate" /><br /><button id="submit">Submit</button>';

$(this).html(addTargetForm);


function modernizer_init() {
    if (!Modernizr.input.placeholder) {

        $('[placeholder]').onfocus(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('');
                }
            })
        });

    }
}

Answer 1

Это должно работать непосредственно внутри $(function(){...}) структуры, но во что бы то ни стало, поместить ее в function modernizer_init() {}, если это то, что нужно вашему приложению.

javascript:

$("body").on('focusin', '[placeholder]', function(evt) {
    var $input = $(evt.target);
    if ($input.val() == $input.attr('placeholder')) {
        $input.val('');
        $input.removeClass('placeholder');
    }
}).on('focusout', '[placeholder]', function(evt) {
    var $input = $(evt.target);
    if ($input.val() == '' || $input.val() == $input.attr('placeholder')) {
        $input.addClass('placeholder');
        $input.val($input.attr('placeholder'));
    }
}).on('submit', 'form', function(evt) {
    var $form = $(evt.target);
    $form.find('[placeholder]').each(function() {
        var $input = $(this);
        if ($input.val() == $input.attr('placeholder')) {
            $input.val('');
        }
    });
});
$('[placeholder]').focusout();

Это работает путем делегирования обработки событий focusin (focus) и focusout (blur) для тела документа (или более локального контейнера, если хотите), которыйэто способ использования jQuery 1.7.1 для устаревших bind(), .live() и .delegate().

Работает: http://jsfiddle.net/wg2eX/2/