Jquery OnClick Функция не работает должным образом

Question

HTML form-

<div class="inner-container login-panel id="login_form""> 
    <h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3> 
    <div id="login_form" class="loginform"> 
    <a href="#" class="create_account" onClick="ppOpen('#register_panel', '280');">CREATE ACCOUNT</a> 
    <input type="text" id="email" name="email" class="inputbox" placeholder="Email"> 
    <input type="password" id="password" name="password" class="inputbox" placeholder="Password"> 
    <button id="loginsubmit" class="btn btn-red">LOG IN</button> 
    <a href="#" class="login_facebook">login with facebook</a> 
    </div> 
    <div class="links"> 
    <a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME?</a>/<a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR PASSWORD?</a> 
    </div> 
</div> 

и код яваскрипта -

console.log("before"); 
$(document).ready(function(){ 
    console.log("then"); 
    $("#loginsubmit").click(function(){ 
     console.log("success"); 
     e = $("#email").val(); 
     p = $("#pass").val(); 
     if($("#email").val()==""||$("#pass").val()==""){ 
      $("div#ack").html("please enter email and pass"); 
      } 
     else { 
      $.post($("#myForm").attr("action"), 
        //$("#myForm :input").serializeArray(), 
        {emailid: e, password: p}, 
        function(data){ 
         $("div#ack").html(data); 
        }); 
      }  
     $("#myForm").submit(function(){ 
      return false; 
     }); 
    }); 
}); 

В консоли до и затем печатает, но никакого ответа на нажатия #loginsubmit. Есть ли проблема с кодом javascript? Пожалуйста, помогите мне разобраться.

Answer 1

Ваш код работает, вы не написали элемент div с #ack id,, Если вы добавите этот элемент, вы можете увидеть ответ на кнопку click.

Answer 2

HTML: <button id="loginsubmit" class="btn btn-red" onclick="logincheck()">LOG IN</button>

Javascript:

function logincheck(){ 
    console.log("success"); 
    e = $("#email").val(); 
    p = $("#pass").val(); 
    if($("#email").val()==""||$("#pass").val()=="") 
     $("div#ack").html("please enter email and pass"); 
    else 
     $.post($("#myForm").attr("action"), 
       //$("#myForm :input").serializeArray(), 
       {emailid: e, password: p}, 
       function(data){ 
        $("div#ack").html(data); 
       }); 
    $("#myForm").submit(function(){ 
     return false; 
    }); 

} 

Сейчас он работает правильно.

Answer 3

любезно использовать следующий обновленный скрипт и HTML:

JavaScript:

console.log("before"); 
$(document).ready(function(){  
    console.log("then"); 
    $("#loginsubmit").click(function(){ 
     console.log("success"); 
     e = $("#email").val(); 
     p = $("#pass").val(); 
     if($("#email").val()==""||$("#pass").val()==""){ 
      $("div#ack").html("please enter email and pass"); 
     } 
     else { 
      $.post($("#myForm").attr("action"), 
      //$("#myForm :input").serializeArray(), 
      { emailid:e, password:p }, 
       function(data){ 
        $("div#ack").html(data); 
       },'json'); 
      }  
      $("#myForm").submit(function(){ 
       return false; 
      }); 
     }); 
}); 

Html:

<div class="inner-container login-panel id="login_form"">  
    <h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3> 
    <form action="#" method="post" id="myForm"> 
     <div id="login_form" class="loginform"> 
      <a href="#" class="create_account" onClick="ppOpen('#register_panel', '280');">CREATE ACCOUNT</a> 
      <input type="text" id="email" name="email" class="inputbox" placeholder="Email"> 
      <input type="password" id="password" name="password" class="inputbox" placeholder="Password"> 
      <button id="loginsubmit" class="btn btn-red">LOG IN</button> 
      <a href="#" class="login_facebook">login with facebook</a> 
      <div id="ack"></div> 
     </div> 
    </form> 
    <div class="links"> 
     <a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME?</a>/
     <a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR PASSWORD?</a> 
    </div> 
</div>