1

我在使用动态创建的 Javascript 事件处理函数时遇到问题。

在我的 HTML 中，我有以下内容：

<input id="nvctrlfont1" type=number min=18 max=144 step=1 value=36 maxlength="3" size="8">
<input id="nvctrlfont2" class="color" value="000000" style="background-color:black;width:70px;">
<input id="nvctrlfont4" class="color" value="000000" style="background-color:black;width:70px;">

......

类颜色只是一个 javascript 颜色选择器。

元素 ID 有 1,2,4 ... 等作为布尔值。也就是说，一个 JS 函数接收一个用于隐藏或显示 HTML 输入元素的布尔值。对于隐藏的元素，不分配事件，对于未隐藏的元素，将分配事件。

事件函数将驻留在 nvFontFuncs 中。

我似乎无法解决的问题：

当函数分配发生到 nvEL.onchange 时，它​​似乎每次都用相同的函数替换它。

例如，假设布尔值 nvFontBool 带有“6”，那么应该启用输入元素 nvcontrolfont2 和 nvcontrolfont4 并相应地将 nvFontFuncs nvctrlfont2 和 4 中的功能分配给 onchange 事件。

然而会发生的是 nvctrlfont4 函数最终被分配给两个元素。

换句话说，无论哪个元素设置了 onchange 事件，当单击它时，它都会调用最后一个分配的元素。在我的示例中，无论我更改 INPUT nvctrlfont2 还是 nvctrlfont4 元素，都会调用 nvctrlfont4()。

例如，如果我将 nvFontBool 参数更改为“7”，从而启用所有三个输入元素。然后无论更改哪一个，它都会调用 nvctrlfont4() （恰好是循环中分配的最后一个）。

我也尝试使用 addEvent 和 setAttributes，结果相同。它作为函数的 onchange 分配在绑定时是静态的。因此，哪个是最近的一个绑定最终会分别替换所有元素的先前绑定。

帮助？

继承人的JS。

var nvFontFuncs = {
  nvctrlfont1: function () { alert('Function 1'); },
  nvctrlfont2: function () { alert('Function 2'); },
  nvctrlfont4: function () { alert('Function 4'); }
};

这是功能

function nvSetFontCtrls(nvFontBool)
{
    var nvEL;
    var nvName="nvctrlfont";
    var nvTemp;

    nvFg=1;
    while(nvFontBool != 0) {
        //alert("FontBool:"+nvFontBool);
        nvTemp=nvName+nvFg.toString();
       // nvTemp="func"+nvFg.toString(); 
        nvEL=document.getElementById(nvTemp);
        if(nvFontBool & nvFg) {
             nvEL.style.display="block";
             nvEL.onchange=function() { nvFontFuncs[nvTemp](); }
        }
        else {
            nvEL.style.display="none";        
        }
        nvFontBool=nvFontBool&(~nvFg); //alert("nvfontbool:"+dechex(~nvFg));
        nvFg = nvFg << 1; 
    }
}
4

2 回答 2

0

您分配以下功能：

function() { nvFontFuncs[nvTemp](); }

nvTemp是 的局部范围内的变量nvSetFontCtrls。因此，当调用处理程序时，当然，nvTemp 具有它设置的最后一个值。

你可以这样做：

nvEL.onchange=(function(nvTemp) {
  return function() { nvFontFuncs[nvTemp](); }
}(nvTemp));
于 2013-03-15T21:28:25.543 回答
0

问题是，nvTemp 设置为循环的最后一个值，因此一旦调用处理函数，nvTemp 将具有'nvctrlfont4'。

如果使用nvEL.onchange=nvFontFuncs[nvTemp]赋值，问题就解决了

于 2013-03-15T21:46:46.853 回答