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

Question

These two javascript functions work perfectly on unaltered dom elements. However the delete_route function fails when asked to delete elements appended to the dom via the second function. For clarity, I am only looking at elements where parts[0] is always option - it is created by spliting the a > id on the "_".

Why is Javascript apparently seeing this difference between "native" dom objects and inserted objects?

//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 this applies to (I have gone though some effort with the creating part - options that were inserted by javascript are exactly indentical to "native" page elements):

         <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

Based on the code from your previous questions, you're assigning event handlers at window.onload by calling the clickDetection() function.

I assume when you've created new elements, you haven't bothered to give those new elements the same event handlers that your initial clickDetection() does.

If that's the case, you'll need to be sure that those new elements get handlers that can respond to clicks.

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

Then in your new_route function, manually assign clickHandler to the new <a> element.

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...

}