Question

编辑＃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？

Answer 1

看起来问题是因为您正在与许多处理程序共享subtaskCounter。围绕aWholeTask.addEventListener("click", ...)的呼叫是否有循环？

如果有，那么在调用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()将输出您想要的值。

事件委托，为什么这不起作用，通过id选择目标

1 个答案: