Question

我的HTML文件上有这个脚本

<script type="text/javascript">
    $(document).ready(function addTeacher() {
        $("#addTeacher").click(function addTeacher() {
            $('#conteudo').html("FORM CODE HERE");
        });
    }); 
</script>

我想在div上打印的表格#addTeacher：

<form  method="post" action="auth.php" role="form">

    <div class="form-group">
        <input type="text" name="login" id="login" class="form-control" placeholder="Login">
    </div>

    <div class="form-group">
        <input type="password" name="senha" id="senha" class="form-control" placeholder="Senha">
    </div>

    <input type="submit" value="Login" class="btn btn-success" />

</form>

我将表单代码粘贴在引号之间，但是当我单击按钮时，没有任何反应。我做错了什么？

div代码：

<div class="container" id="conteudo">
  <div class="row">
  </div>
</div>

按钮：

 <button type="button" id="addTeachers" class="btn btn-primary">Adicionar Professor</button>

Answer 1

首先，确保您引用了按钮的正确ID。 addTeachers与addTeacher不同。

其次，确保你的引号正确并逃脱你的换行符。得到错误将导致语法错误。

以下是一个有效的例子：http://jsfiddle.net/2AMg4/1/

Answer 2

在这里你也可以用javascript：

来做到这一点

<script type="text/javascript">
    var add = function(){

        var parent = document.getElementById("row");

    var form1 = document.createElement("form");
        form1.setAttribute("method","post");
        form1.setAttribute("action","auth.php");
        form1.setAttribute("role","form");

    var form_groupe = document.createElement("div");
        form_groupe.setAttribute("class","form-groupe");

    var form_groupe2 = document.createElement("div");
        form_groupe.setAttribute("class","form-groupe");



    var login = document.createElement("input");
        login.setAttribute("type","text");
        login.setAttribute("name","login");
        login.setAttribute("id","login");
        login.setAttribute("class","form-controll");
        login.setAttribute("placeholder","login");

    var pass = document.createElement("input");
        pass.setAttribute("type","password");
        pass.setAttribute("name","senha");
        pass.setAttribute("id","senha");
        pass.setAttribute("class","form-controll");
        pass.setAttribute("placeholder","Senha");   

    var submit = document.createElement("input");   
        submit.setAttribute("type","submit");
        submit.setAttribute("name","login");
        submit.setAttribute("class","btn btn-success");

    form_groupe.appendChild(login);
    form_groupe2.appendChild(pass); 
    form1.appendChild(form_groupe);
    form1.appendChild(form_groupe2);    
    form1.appendChild(submit);  
    parent.appendChild(form1);  
};
</script> 

<div class="container" id="conteudo">
  <div class="row" id="row">
  </div>
</div>
 <button type="button" id="addTeachers" class="btn btn-primary" onclick="add();">Adicionar Professor</button>

这是working code

HTML / Javascript在点击事件上打印表单

2 个答案: