将 jQuery 占位符添加到动态创建的表单元素答案

【问题标题】：Adding jQuery placeholders to dynamically created form elements将 jQuery 占位符添加到动态创建的表单元素
【发布时间】：2012-10-21 06:15:55
【问题描述】：

有没有人成功地将 IE8 的 jQuery 占位符文本添加到动态创建的表单元素中。

例如，我单击一个按钮并出现一个通过 AJAX 加载的表单，我需要使用占位符文本点击新表单。

我尝试过使用 jQuery .live、.bind、.on 等...但是在创建新元素时都没有捕捉到它们。

我也尝试将它放在点击功能中，这样当他们点击按钮时，占位符功能就会被激活。

$('input[placeholder]').on("focus", 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().parents('form').submit(function() {
    $(this).find('input[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

【问题讨论】：

“是否有人成功地将 IE8 的 jQuery 占位符文本添加到动态创建的表单元素中。” 是。在您的情况下，虽然您没有使用 .on 的正确语法，但如果您希望它影响未来的元素，则需要它的事件委托形式。
你看过github.com/mathiasbynens/jquery-placeholder吗？

标签： jquery forms placeholder

【解决方案1】：

$(document).on({
    focus: 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'));
        }
    }
},"input[placeholder]");


$(document).on("submit","form",function() {
    $(this).find('input[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    });
});

$('input[placeholder]').blur();

让我知道这个重构是否有效。

【讨论】：