0

编辑#2： 问题不存在了。这是某种范围界定问题。但现在它正在工作。对于给您带来的不便，我深表歉意。

在我的脚本的某些部分有一个事件委托并通过 id 指定目标。但是当我运行它时。这条线if(evt.target.id == ("subtaskSubmit" + subtaskCounter))似乎根本不起作用。这是我的代码：

var subtaskCounter = 0;
aWholeTask.addEventListener("click", function(evt){         
            //other event targets specifications ..

                if(evt.target.id == "divide"){  
                    var subtaskInput = document.createElement("input"), 
                    subtaskSubmit = document.createElements.button("submit"), // this is a special function i've made, don't bother about it. I've used it all over the place and it's working normally.
                    subtaskContainer = document.createElement("p");
                    subtaskContainer.style.marginLeft = "40px";
                    subtaskInput.id = "subtaskInput" + (++subtaskCounter);
                    subtaskInput.type = "text";

                    subtaskSubmit.id = "subtaskSubmit" + subtaskCounter;
                    subtaskContainer.appendChildren(subtaskInput,subtaskSubmit);                
                    aWholeTask.appendChild(subtaskContainer);
                }

                if(evt.target.id == ("subtaskSubmit" + subtaskCounter)){
                    //this event is the one that not working when i press on that element
                    alert("hello");                     

                }   
        });

编辑： 我做了一些更改来调试代码，结果很奇怪：

  var subtaskCounter = 0;
aWholeTask.addEventListener("click", function(evt){         
            //other event targets specifications ..

                if(evt.target.id == "divide"){  
                    var subtaskInput = document.createElement("input"), 
                    subtaskSubmit = document.createElements.button("submit"), // this is a special function i've made, don't bother about it. I've used it all over the place and it's working normally.
                    subtaskContainer = document.createElement("p");
                    subtaskContainer.style.marginLeft = "40px";
                    subtaskInput.id = "subtaskInput" + (++subtaskCounter);
                    subtaskInput.type = "text";

                    subtaskSubmit.id = "subtaskSubmit" + subtaskCounter;
                    subtaskContainer.appendChildren(subtaskInput,subtaskSubmit);                
                    aWholeTask.appendChild(subtaskContainer);
                }


                    if(evt.target.innerHTML == "Submit"){

                        alert(evt.target.id == ("subtaskSubmit" + subtaskCounter)); 
                        //And this surprisingly returns false !         
                    }   
            });

那么为什么会evt.target.id == ("subtaskSubmit" + subtaskCounter)退货false呢？

4

1 回答 1

0

看起来问题是因为您正在subtaskCounter由许多处理程序共享。调用 to 是否有循环aWholeTask.addEventListener("click", ...)？

如果有，那么在调用单击处理程序时，subTaskCounter将始终指向导致它退出循环的值。

例子

var subtaskCounter = 0;
while (subCounter < 5) {
    aWholeTask.addEventListener("click", function(evt){
        console.log(subTaskCounter);
    }); 
    subTaskCounter ++;
}

在上面的示例中，您会注意到subTaskCounter调用单击处理程序时始终为 5（导致循环结束的值）。它是所有处理程序共享的同一个变量。如果这确实是您的问题，您需要冻结您的闭包。这是一种方法，使用自调用匿名函数。

var subtaskCounter = 0;
while (subCounter < 5) {
    aWholeTask.addEventListener("click", (function(frozenSubTaskCounter) {
        return function(evt){
            console.log(frozenSubTaskCounter);
        };
    })(subTaskCounter)); 
    // The line above creates a separate closure `frozenSubTaskCounter`
    // for each of the handlers
    subTaskCounter ++;
}

在上面的示例中，您会看到console.log()它将输出您想要的值。

于 2012-07-30T19:30:14.913 回答