кнопка отправки не работает с отображения формы с помощью jquery

Question

У меня есть форма, которую я создал с помощью jquery внутри другого элемента divs, используя тот же идентификатор для кнопки отправки. здесь является частью кода 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. Вы можете переключить его на класс, хотя для него просто потребуется . вместо # перед submitbtn.

Answer 2

Корректировать JQuery код

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

Answer 3

Я вижу, вы создаете вид 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"); 
}); 
});