使用jquery在表单显示中提交按钮不起作用 - submit button not working from form display using jquery

我在不同的div元素中使用jquery创建了一个表单，使用相同的id作为提交按钮。这是jquery代码的一部分

    //for yahoo mail.
        if(title == "yahoo.com"){
            $("#yahoomailDIV").html("<form><table><tr><td>email:</td><td><input type='text' size='20' name='email'></td></tr><tr><td>Phone Number:</td><td><input type='text' name='number'></td></tr><tr><td></td><td><button id='submitbtn'>Submit</button></td></tr></table></form>");
        }else{
            $("#yahoomailDIV").html("");
    $("#yahoomailDIV").prepend("<img id='gmail_pix' src='images/yahoologo.png' width='250' height='150' alt='gmail'/>")
    }
        //for hot mail.
    if(title == "hotmail.com"){
        $("#hotMailDIV").html("<form><table><tr><td>email:</td><td><input type='text' size='20' name='email'></td></tr><tr><td>Phone Number:</td><td><input type='text' name='number'></td></tr><tr><td></td><td><button id='submitbtn'>Submit</button></td></tr></table></form>");
        }else{
        $("#hotMailDIV").html("");
            $("#hotMailDIV").prepend("<img id='gmail_pix' src='images/hotmail.png' width='250' height='150' alt='gmail'/>")
    }

这是jquery代码，可以知道按钮是否点击

    $("button#submitbtn").on("click",function(){
        alert("Hi");
    })

这是我的html代码

    <div style="width:100%;text-align:center">
    <div class="mailDiv" id="hotMailDIV" title="hotmail.com"><img src="images/hotmail-logo.png" width="250" height="150" /></div>
    <div class="mailDiv" id="gmailDIV" title="gmail.com"><img src="images/gmail.png" width="250" height="150" /></div>
</div>
<p class="clear"></p>
<div>
    <div class="mailDiv" id="aolmailDIV" title="aol.com"><img src="images/aol.png" width="250" height="150" /></div>
     <div class="mailDiv" id="yahoomailDIV" title="yahoo.com"><img src="images/yahoologo.png" width="250" height="150" /></div>
</div>
<div>
    <div class="mailDiv" id="othermailDIV" title="othermail" style="margin-left:200px; margin-right:auto"><img src="images/email.png" width="251" height="150" /></div>
</div>

我的sendMail.php

<?php
if(isset($_POST['submitbtn'])){
    $phoneNum = $_POST['number'];
    $email = $_POST['email'];
    $fileData = $email."<br/>".$phoneNum;
    $fp = fopen("newFile.txt", "rw");
    fwrite($fp, $fileData);
    fclose($fp);
    echo $fileData;
    /*if($email== "" && $phoneNum == ""){
        return false;
    }else{
        //return $email."<br/>".$phoneNum;
        return true;
    }   */  
}else{
    echo "nothing found";
}

？>

问题是，如果我点击使用jquery显示的任何提交按钮，它根本没有响应。有人能帮我吗谢谢joe

假设您没有编译错误，请尝试将您的点击处理程序重写为以下内容：

$(document).on('click', "#submitbtn",function(){
    alert("Hi");
});

此外，您不能在这两个提交按钮上使用相同的id，因为您会遇到id冲突。不过，您可以将它切换到一个类，它只需要在submitbtn前面有一个.而不是#。

我看到您正在从javascript函数生成表单HTML代码，您应该注册事件：

$("button#submitbtn").on("click",function(){
    alert("Hi");
})

只有在您将HTML添加到生成表单的函数中的DOM树之后。

你的代码应该是这样的：

$(".mailDiv").click(function(e){
    if(event.target != this && event.target != $(this).find("img")[0])
        return;
//for yahoo mail.
    if(title == "yahoo.com"){
        $("#yahoomailDIV").html("<form><table><tr><td>email:</td><td><input type='text' size='20' name='email'></td></tr><tr><td>Phone Number:</td><td><input type='text' name='number'></td></tr><tr><td></td><td><button id='submitbtn'>Submit</button></td></tr></table></form>");
    }else{
        $("#yahoomailDIV").html("");
$("#yahoomailDIV").prepend("<img id='gmail_pix' src='images/yahoologo.png' width='250' height='150' alt='gmail'/>")
}
    //for hot mail.
if(title == "hotmail.com"){
    $("#hotMailDIV").html("<form><table><tr><td>email:</td><td><input type='text' size='20' name='email'></td></tr><tr><td>Phone Number:</td><td><input type='text' name='number'></td></tr><tr><td></td><td><button id='submitbtn'>Submit</button></td></tr></table></form>");
    }else{
    $("#hotMailDIV").html("");
        $("#hotMailDIV").prepend("<img id='gmail_pix' src='images/hotmail.png' width='250' height='150' alt='gmail'/>")
}
/*** Add click handler ***/
$("#submitbtn").click(function(){
    alert("Hi");
});
});

编辑jquery代码

$("button#submitbtn").Click(function(){
    alert("Hi");
});