Question

我有一个对象，X和一些创建div的代码并赋予id = X.ID.创建html后，我将对象分配给div，如下所示：

document.getElementById(X.ID).XValue = X;

如果我在该陈述之后设置了休息时间，我可以评估document.getElementById(X.ID).XValue并查看X的所有属性。

在创建html时，我添加了onmouseup="MOUSE_UP(event)".

var aProp = {};
aProp.ThisValue = "This";
aProp.ThatValue = "That";
aProp.Id = 5;
var html = '<div id="' + aProp.Id + '"';
var func = 'MOUSE_UP';
html += ' onmouseup="' + func + '(event) ">';
html += '</div>';
document.getElementById("test").innerHTML += html;
document.getElementById(aProp.Id).XVALUE = aProp;

function MOUSE_UP(event) {
    alert(event.currentTarget.XValue.ThisValue);
}

现在，当我在MOUSE_UP中设置中断时，event.currentTarget是我的div（event.currentTarget.id == X.ID），但是event.currentTarget.XValue未定义。

为什么XValue在之前定义时未定义？

Answer 1

设置innerHTML的{{1}}似乎会从其子项中清除所有自定义属性。您可以在jsFiddle中查看此内容。当您按原样运行小提琴时，在#test添加更多内容后，您会注意NewProp的{{1}}将成为#1如果您记录undefined }而不是test.innerHTML += ...，您将获得正确的值。

这是因为tabIndex运算符只是NewProp这样的语句的快捷方式，也可以写成+=。

基本上，您从a = a + b的内部HTML创建一个字符串，然后向其中添加另一个字符串，最后用这个新字符串替换a += b的原始#test。 innerHTML中的所有先前元素都将替换为新的元素，这些元素没有设置自定义属性。

为元素设置#test属性时，#test属性也会添加到HTML中，因此它们是id id的一部分，并添加到新创建的HTML也是。

如果使用正确的DOM操作而不是设置innerHTML，您将获得所需的结果。以下代码使用createElement()和appendChild()方法，而不是设置#test。

innerHTML

A live demo at jsFiddle

Answer 2

这不是一个答案，因为它是一个澄清和解决方法。

鉴于此html

<div id="test"></div>

和此代码

function myMouseUp(e) {
    alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);
}

function buildOneDiv(aProp) {
    aProp.ThisValue = "This";
    aProp.ThatValue = "That";
    var html = '<div id="' + aProp.id + '"';
    var func = 'myMouseUp';
    html += ' onmouseup="' + func + '(event) ">';
    html += 'Test ' + aProp.id + '</div>';
    return html;
}

function buildDivs(x) {
    var html = buildOneDiv(x);
    document.getElementById("test").innerHTML += html;
    document.getElementById( x.id ).NewProp = x;
}

window.onload = function () {
    for (var i = 1; i < 4; i++) {
        var aProp = {};
        aProp.id = i;
        buildDivs(aProp);
    }
};

最终结果是只有定义了onmouseup的LAST div才能在myMouseUp中拥有NewProp的合法值。对于每个其他div，此属性未定义。这就是为什么我得到一些评论表明“它确实有用”。它适用于ONE，这就是我在我的例子中所拥有的一切。（这是澄清。）

我的解决方法是将全局对象添加为关联数组并更改两个语句：

var myDivs = {};    // global

替换

document.getElementById( x.id ).NewProp = x;

使用

在buildDivs中

myDivs[x.id] = x;

并替换

alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);

在myMouseUp中

alert(myDivs[e.currentTarget.id].ThisValue );。

我仍然想知道为什么原始方法不起作用。

Javascript将新属性附加到元素

2 个答案: