php - jqueryを使用してフォーム表示から送信ボタンが機能しない

Question

送信ボタンに同じIDを使用して、異なるdiv要素内でjqueryを使用して作成したフォームがあります。 ここに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を使用して表示されている送信ボタンのいずれかをクリックしても、まったく応答しないことです。ジョーに感謝

Answer 1

コンパイル エラーがないと仮定して、クリック ハンドラを次のように書き直してみてください。

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

また、ID の競合が発生するため、これらの送信ボタンの両方で同じ ID を使用することはできません。クラスに切り替えることはできますが、submitbtn の前にa.ではなく aが必要になります。#

Answer 2

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");
});
});

Answer 3

jquery コードを編集する

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