Javascript失败，因为dom已被修改？

Question

这两个javascript函数可以在未改变的dom元素上完美工作。然而，当要求通过第二个函数删除附加到dom的元素时，delete_route函数失败。为了清楚起见，我只查看parts[0]总是选项的元素 - 它是通过在“_”上拆分a> id创建的。

为什么JavaScript显然看到“本地”dom对象和插入的对象之间的这种区别？

//handle delete events 
function delete_route (parts) { 
    if (parts[0] == "field") { 

    var select_container = "container_"+parts[2]; 
    var getContainer = document.getElementById(select_container); 

    getContainer.parentNode.removeChild(getContainer); 

    } else if (parts[0] == "option") { 
    var optionId = parts[0]+"_"+parts[2]+"_"+parts[3]; 
    var getOption = document.getElementById(optionId); 

    getOption.parentNode.removeChild(getOption); 
    } 
} 

//handle new events 
function new_route (parts) { 
    var highest_number = -1; 

    if (parts[0] == "field") { 
    } else if (parts[0] == "option") { 
    var selectContainer = "container_"+parts[2]; 
    var thisContainer = document.getElementById(selectContainer); 

    //get last option id (for new object tagging) 
    var optionList = thisContainer.getElementsByTagName("input"); 
    var optionListLength = optionList.length -2; 

    //more accurate new node placement than last option which didn't work correctly anyway 
    lastChild = "options_wrapper_"+parts[2]; 
    var lastChildNode = document.getElementById(lastChild); 

    //generate option 
    var labelNode = document.createElement ("label"); 
    var inputNode = document.createElement ("input"); 
    var linkNode = document.createElement ("a"); 
    var breakNode = document.createElement ("br"); 

    inputNode.setAttribute("type", "text"); 
    var inputNodeId = parts[0]+"_"+parts[2]+"_"+optionListLength; 
    inputNode.setAttribute("id", inputNodeId); 
    inputNode.setAttribute("name", inputNodeId); 
    inputNode.setAttribute("value", "Undefined"); 

    labelNode.setAttribute ("for", inputNodeId); 
    var labelNodeText = document.createTextNode ("Option Value"); 

    linkNode.setAttribute("href", "#"); 
    var linkId = parts[0]+"_delete_"+parts[2]+"_"+optionListLength; 
    linkNode.setAttribute("id", linkId); 
    var linkNodeText = document.createTextNode ("Delete option"); 

    lastChildNode.appendChild (labelNode); 
    labelNode.appendChild (labelNodeText); 
    lastChildNode.appendChild (inputNode); 
    lastChildNode.appendChild (linkNode); 
    linkNode.appendChild (linkNodeText); 
    lastChildNode.appendChild (breakNode); 

    } 
} 

HTML适用于（我已经尽管一些努力与创造的一部分 - 选择由JavaScript所插入的是完全张玉峰，以“本土”页面元素）：基于

  <div id="options_wrapper_7"> 
    <label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red"> <a id="option_delete_7_0" href="#">Delete option</a><br> 

<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green"><a id="option_delete_7_1" href="#">Delete option</a><br> 

<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue"><a id="option_delete_7_2" href="#">Delete option</a><br> 

</div> 

Answer 1

代码从您以前的问题，您通过调用clickDetection()函数在window.onload分配事件处理程序。

我假设你创建新元素时，你没有打算给这些新元素提供与你的初始clickDetection()相同的事件处理程序。

如果是这种情况，您需要确保这些新元素获得可响应点击的处理程序。

// make a separate reference to the handler so we can use it 
    // for elements that are created later. 
function clickHandler() { 
    clickRoute(this); 
    return false 
}; 

function clickDetection() { 
    var canvas = document.getElementById("content"); 
    var dumbLinks = canvas.getElementsByTagName("a"); 
    for (var i = 0; i < dumbLinks.length; i++) { 
      // Assign the "clickHandler" when the page loads 
     dumbLinks[i].onclick = clickHandler; 
    } 
} 

然后在你的new_route功能，手动分配clickHandler新<a>元素。

function new_route (parts) { 
    var highest_number = -1; 

    if (parts[0] == "field") { 
    } else if (parts[0] == "option") { 
    var selectContainer = "container_"+parts[2]; 
    var thisContainer = document.getElementById(selectContainer); 

    //get last option id (for new object tagging) 
    var optionList = thisContainer.getElementsByTagName("input"); 
    var optionListLength = optionList.length -2; 

    //more accurate new node placement than last option which didn't work correctly anyway 
    lastChild = "options_wrapper_"+parts[2]; 
    var lastChildNode = document.getElementById(lastChild); 

    //generate option 
    var labelNode = document.createElement ("label"); 
    var inputNode = document.createElement ("input"); 
    var linkNode = document.createElement ("a"); 
    var breakNode = document.createElement ("br"); 

     // ********RIGHT HERE********* 
     // Assign the handler to the new "linkNode" element 
    linkNode.onclick = clickHandler; 

    // ...and so on with the rest of the code... 

}