由于dom已更改，Javascript失败？

这两个javascript函数在未更改的dom元素上完美地工作。但是，当通过第二个函数请求删除附加到dom的元素时，delete_route函数失败。为了清楚起见，我只看了

parts[0]

始终是选项的元素-它是通过在“\ux”上拆分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插入的选项与“本机”页面元素完全相同）：

选项值

选项值

选项值

根据前面问题中的代码，您正在

窗口中分配事件处理程序。通过调用
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; 
    }
}

那么在插入新元素后调用该函数？不管怎样，我都会试试的，但是刚刚被叫走了@YsoL8：不，这会将处理程序重新分配给前面的元素。我将使用一个解决方案更新我的答案，该解决方案将允许您在创建元素时分配处理程序。嗨，Patrick。我总是被我不期望的行为抓住！您能告诉我clickHandler如何工作，而无需明确地将parts变量传递给它吗？我希望100%了解我在修复bug时使用的代码。@YsoL8:处理程序所做的是调用
clickRoute（）
函数，并将
此
作为参数传递。在处理程序中，
此
引用已单击的元素。然后在
clickRoute（）
函数中，它从元素中获取ID，并在
字符上拆分它<代码>var linkParts=linkId.split（“”）这是您的
零件的来源。它希望索引
[1]
处的项具有
“new”
或
“delete”
，并调用适当的函数。
   // 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; 
    }
}

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

}