Javascript не работает, потому что дом был изменен?

Question

Эти две функции javascript отлично работают с неизмененными элементами dom. Однако функция delete_route завершается неудачно, когда ее просят удалить элементы, добавленные в dom через вторую функцию. Для ясности я смотрю только на элементы, где 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

Исходя из кода из ваших предыдущих вопросов, вы назначаете обработчики событий на window.onload, вызывая функцию clickDetection().

Я предполагаю, что когда вы создали новые элементы, вы не удосужились предоставить этим новым элементам те же обработчики событий, что и ваши начальные 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...

}