Question

这两个javascript函数在未改变的dom元素上完美运行。但是当要求删除通过第二个函数附加到dom的元素时，delete_route函数失败。为清楚起见，我只关注parts[0]始终是选项的元素 - 它是通过拆分a＆gt;创建的。 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...

}

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

1 个答案: