在JavaScript中使用onclick在使用onclick本身創建的div內創建新的div？

Question

我創建了一個由單選按鈕輸入組成的div，它使用onclick從php表單中的單選按鈕輸入中創建，然后我再次嘗試使用onclick從此已創建的div內部創建另一個div，但僅創建了外部div。 想知道我在哪里錯..

        <input id="sub"  type="radio" name="opt1" value="2" onclick="createDiv4()"> Academic User<br/>

           function createDiv4() {
            if(document.getElementById("acad_")==null)
            {
               var divi = document.createElement("div");
               divi.id="acad_";
                divi.style.height="100px";
                //divi.style.marginTop="200px";
               var cont = document.getElementById('contain');
                 cont.appendChild(divi);                   
                var p = document.createElement("label");
               var disp = document.createTextNode("Please select the type of User :");

               p.appendChild(disp);
               p.style.textSize="16px";
               p.style.textAlign="left";
               divi.appendChild(p);
               var b1 = document.createElement("BR");
               divi.appendChild(b1);

               var ip = document.createElement("input");
               ip.name="wo";
               ip.value="1";
               ip.type="radio";
               ip.onclick="createDiv4_1()";
               ip.style.marginRight="4px";

               divi.appendChild(ip);
               var labe = document.createElement("label");

               var labe_val = document.createTextNode("Technical Institute");
               labe.appendChild(labe_val);
               divi.appendChild(labe);

               var b = document.createElement("BR");
               divi.appendChild(b);

               var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";
               ip2.onclick="createDiv4_1()";
               divi.appendChild(ip2);

                var labe2 = document.createElement("label");

               var labe_val2 = document.createTextNode("School");
               labe2.appendChild(labe_val2);
               divi.appendChild(labe2);


                if(document.getElementById("govt")!=null)
               {
                   var de = document.getElementById("govt");
                   de.parentNode.removeChild(de);
               }

            }   
            else
            {
                var divi1 = document.getElementById("acad_");
                divi1.parentNode.removeChild(divi1);
            }
        }

    </script>
    <script>    
        function createDiv4_1() {
            if(document.getElementById("school")==null)
            {

               var divi = document.createElement("div");
               divi.id="school";

                //divi.style.marginTop="200px";
               var cont = document.getElementById('contain');
                 cont.appendChild(divi);                   
                var p = document.createElement("label");
               var disp = document.createTextNode("Please select the type of User for  Workshop :");

               p.appendChild(disp);
               p.style.textSize="16px";
               p.style.textAlign="left";
               divi.appendChild(p);
               var b1 = document.createElement("BR");
               divi.appendChild(b1);

               var ip = document.createElement("input");
                ip.name="wo";
               ip.value="1";
               ip.type="radio";
               ip.style.marginRight="4px";

               divi.appendChild(ip);
               var labe = document.createElement("label");

               var labe_val = document.createTextNode("School Student");
               labe.appendChild(labe_val);
               divi.appendChild(labe);

               var b = document.createElement("BR");
               divi.appendChild(b);

               var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";

               divi.appendChild(ip2);

                var labe2 = document.createElement("label");

               var labe_val2 = document.createTextNode("Teacher");
               labe2.appendChild(labe_val2);
               divi.appendChild(labe2);

               var b2 = document.createElement("BR");
                divi.appendChild(b2);

                var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";

               divi.appendChild(ip2);

                var labe3 = document.createElement("label");

               var labe_val3 = document.createTextNode("Parent");
               labe3.appendChild(labe_val3);
               divi.appendChild(labe3);

                if(document.getElementById("govt")!=null)
               {
                   var de = document.getElementById("govt");
                   de.parentNode.removeChild(de);
               }

            }   
            else
            {
                var divi1 = document.getElementById("school");
                divi1.parentNode.removeChild(divi1);
            }
        }
        </script>

Answer 1

您不能正確調用這些函數。 代替 ：

ip.onclick= "createDiv4_1()";

這只是一個字符串，不會調用它。 您可以將其放在HTML中的引號中，而在JavaScript中則不需要。 還要擺脫JS中的括號。 所以使用這個：

ip.onclick= createDiv4_1;

工作提琴： https : //jsfiddle.net/thatOneGuy/xgvqwcq4/2/

我添加了一個contain ID的div來使其工作。

Answer 2

根據您的問題標題，您有兩種選擇。

忘記html內的onclikc並使用普通的js

document.getElementById("secondDiv").addEventListener("click", function () {
    newFunctionI();
})


/*JQ version*/
$("#secondDiv").on("click", function () {
     newFunctionI();
})

第二種方法是：使用jquery append（）或html（）;

function yourFunctionI() {
    $("#ID").append("<div id='secondDiv' onclick='newFunction()'> new </div>")
}