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/

我添加了ID为contain的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>")
}

在javascript中使用onclick在使用onclick本身创建的div中创建一个新的div？

2 个答案: