雙刀片之後是允許的，但犯規

之前以下html標記雙刀片之後是允許的，但犯規

<div id="parent" class="parent"> 
    <div id="child" class="child"> 
     <input type="text" class="text"/> 
     <input id="submit" value="submit" type="submit" onclick="doThis()"/> 
    </div> 
<div>

和JS代碼

function doThis(){ 
    var span= document.createElement("span"); 
    var parent=document.getElementById("parent"); 
    var child=document.getElementById("child"); 
    var submit=document.getElementById("submit"); 
    child.insertBefore(span,submit.nextSibling); 
    myKeys=[]; 
    myKeys.push(getAllKeyValuePair(submit)); 
    span.innerHTML=myKeys; 
} 
function getAllKeyValuePair(obj){ 
    var str=""; 
    for(var key in obj){ 
     try{ 
      str=str+"{"+key+", "+obj[key]+"}"; 
     } 
     catch(e){ 
      console.log(key); 
     } 
    } 
    return str; 
}

JSFIDDLE例子。它工作正常，可以點擊2,3，...等等提交按鈕時，點擊提交按鈕重複...等。但如果我們試圖取代child.insertBefore(span,submit.nextSibling);到child.insertBefore(span,submit);（即插入span之前submit按鈕而不是之後）我們只能一次點擊提交按鈕。隨之而來的點擊會導致異常。 JSFIDDLE

問題顯然就是爲什麼在之前submit第二和隨之而來的點擊會導致異常插入的情況下，但是在插入的submit後的情況下，它的做工精細。我認爲，重複提交button的原因並非如此。

來源

2013-12-13 St.Antario

當你這樣做：

span.innerHTML = myKeys;

你與id="submit"創建另一個元素。下次單擊按鈕時，將該元素指定給變量，而不是原始HTML中的元素。這個元素不是child的子元素，所以你得到一個錯誤。

與nextSibling版本還創建這些重複的ID，但原來的submit元素早在DOM比添加的元素，所以它得到由getElementById回來了，你沒有得到一個錯誤。我不認爲這是有效的，因爲不允許重複的ID，但這是大多數瀏覽器的工作原理。

如果您不希望將由getAllKeyValuePairs返回的字符串解析爲HTML，請將其分配給span.innerText而不是span.innerHTML。

來源

2013-12-14 00:13:45 Barmar

雙刀片之後是允許的，但犯規

回答

相關問題