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 ?

Why do you have the self calling function as the event handler? — Ruan Mendes, Jul 30 '12 at 17:56
I just don't want variables for those two events to be visible for the rest of events. — Rafael Adel, Jul 30 '12 at 17:56
Mmmm, no i mean i want to hide it from any other if(..){..} statements inside that `aWholeTask` click event. Sorry i'm kinda beginner :) — Rafael Adel, Jul 30 '12 at 17:58
I mean that it makes sense if you have other chunks of self calling functions within the `aWholeTask.addEventListener(...)` — Ruan Mendes, Jul 30 '12 at 18:00
Why ? doesn't this self called function hide the `subtaskCounter`, `subtaskInput` ... variables for the rest of this event ? — Rafael Adel, Jul 30 '12 at 18:03
I've removed the self calling function as it's not affecting the problem i think. — Rafael Adel, Jul 30 '12 at 19:04

score 0 · Accepted Answer · answered Jul 30 '12 at 19:30

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.

This is exactly was what i'm looking for, sadly i can't implement closures in that script i'm writing. I think i'm rewriting the code all over again in an OOP way. So that there's one function for adding and removing tasks and sub tasks, and i'm surely implementing closures there. Thanks again :) — Rafael Adel, Jul 31 '12 at 20:46

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

1 Answers1