Question

我正在创建一个基本上伪造密码输入的输入，如下所示：

var fakeId = currentElement.attr("id") + "Fake";

var fakePasswordInput = $("<input>",
{
    id: fakeId,
    val: value,
    type: "text",
    class: cssClass
});

currentElement.after(fakePasswordInput);

我遇到的问题是：

        currentElement.blur(function () {
            if ($(this).val() == "") {
                $(this).hide();
                var id = $(this).attr("id");
                var val = elements["#" + id];
                // have NO idea why, but it loses the CSS class AND the value.
                $("#" + id + "Fake").show();
            }
        });

最后一行$("#" + id + "Fake").show();将很乐意显示该元素，但它会丢失其CSS类及其中的值。要解决此问题，我会执行以下操作：

$("#" + id + "Fake").val(val).addClass(cssClass).show();

这是一个我不热衷的黑客攻击。那么，为什么隐藏然后显示动态生成的HTML元素会丢失其属性？（这发生在Chrome / FF / IE中）

修改

这都是在一个函数中定义的。 cssClass被声明在最顶端，如下所示：

function formBlur(elements) {
    var cssClass = "default_text_input";

Answer 1

试试这个

var fakePasswordInput = $("<input/>",
{
    id: fakeId,
    val: value,
    type: "text",
    class: cssClass
});

你应该在使用这种语法

在飞行中创建它时关闭输入标签

Answer 2

请尝试将val参数更改为value。

var fakePasswordInput = $("<input/>",
{
    id: fakeId,
    value: value,
    type: "text",
    class: cssClass
});

类参数似乎是正确的。可能因为价值论证而无法正常工作。

动态创建的HTML元素在显示/隐藏时丢失属性

2 个答案: