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複数のハンドラーで共有しているため、問題が発生しているようです。への呼び出しの周りにループがありますaWholeTask.addEventListener("click", ...)か?

存在する場合は、クリック ハンドラが呼び出されるまでsubTaskCounterに、ループから抜け出す原因となった値を常に指します。

例

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

上記の例ではsubTaskCounter、クリック ハンドラーが呼び出されると常に 5 になることがわかります (ループを終了させる値)。これは、すべてのハンドラーで共有される同じ変数です。これが実際に問題である場合は、クロージャーをフリーズする必要があります。自己呼び出し匿名関数を使用して、これを行う 1 つの方法を次に示します。

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 に答える