Event delegation, why is this not working, selecting target by id

Question

---

Edit #2: The problem does not exist anymore. It was some kind of scoping problem. But now it's working.I am really sorry for the inconvenience.

---

In some part of my script there's an event delegation and specifying target by id. But when i run it. the line if(evt.target.id == ("subtaskSubmit" + subtaskCounter)) seems not to work at all. Here's my code :

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");                     

                }   
        }); 

Edit: I've made some changes to debug the code and the result is strange :

  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 !         
                    }   
            });

So why does evt.target.id == ("subtaskSubmit" + subtaskCounter) returns false ?

Answer 1

It looks like the problem is because you're sharing subtaskCounter by a number of handlers. Is there a loop around the call to aWholeTask.addEventListener("click", ...) ?

If there is, then by the time the click handler is called, subTaskCounter will always point to the value that caused it to drop out of the loop.

Example

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

In the above example, you'll notice that subTaskCounter will always be 5 when the click handler is called (the value that cause the loop to end). It's the same variable shared by all the handlers. If this is indeed your problem, you need to freeze your closures. Here's one way to do it, using self calling anonymous functions.

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 ++;
}

In the above example, you'll see that console.log() will output the value that you intended.