現在隠された要素のjqueryイベントを処理する方法

Question

2つの操作を実行しようとしています - 1.クリックしたボタンに基づいてフォームの非表示/表示を行います。2.それぞれの送信ボタンのクリックイベント（ajax付き）形。

パート2を書き込む前は、パート1が正常に動作していました。パート2のコードを追加すると、パート1も機能しません。

HTMLコード -

<div class="btn-group btn-toggle"> 
<button class="btn btn-lg btn-default" id="btn1">Button1</button> 
<button class="btn btn-lg btn-primary active" id="btn2">Button2</button> 

<!-- Main Form --> 

    <form id="login-form" class="form-signin" style="display:inline-block"> 
     {% csrf_token %} 

      <div class="login-wrap"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Enter First Name..." name="fname" value=""> 
        <input type="text" class="form-control" placeholder="Enter Last Name..." name="lname" value=""> 
       <input type="email" class="form-control" placeholder="Email" name="emailaddr" value=""> 
       <label class="checkbox"> 
        I agree to the Terms of Service and Privacy Policy 
       </label> 
       <button type="submit" class="btn btn-primary btn-block btn-flat" id="form1btn">Submit</button> 
       </div> 


     </div> 

    </form> 
    <form class="form-signin" method="post" action="#" id="ownerform" style="display:none"> 
      {% csrf_token %} 

      <div class="login-wrap"> 
       <input type="text" class="form-control" id="ownerName" name="Name" placeholder="Full Name" autofocus=""> 
       <!--<input type="text" class="form-control" placeholder="Address" autofocus="">--> 
       <input type="email" class="form-control" id="ownerEmail" name="Email" placeholder="Email" autofocus=""> 
       <input type="text" class="form-control" id="ownerCompany" name="Company" placeholder="Company" autofocus=""> 
       <label class="checkbox"> 
        I agree to the Terms of Service and Privacy Policy 
       </label> 
       <button class="btn btn-primary btn-block btn-flat" type="submit" id="form2btn">Submit</button> 

      </div> 
     </form> 
    <div id="formmessage" style="display: none"> 


    </div> 

と、対応するjqueryのコードは以下の通りです：

$(document).ready(function(){ 
    $('#btn1').click(function(){ 
    $('#login-form').css('display','none'); 
    $('#ownerform').css('display','inline-block'); 
    ownermethod(); 
    }); 

    $('#btn2').click(function(){ 
    $('#login-form').css('display','inline-block'); 
    $('#ownerform').css('display','none'); 


    }); 

function ownermethod() 
{ 
    $('#form1btn').click(function(){ 
    var name = $('#ownerName').val(); 
    var email = $('#ownerEmail').val(); 
    var company = $('#ownerCompany').val(); 
    $.ajax({ 
     url : './request1/', 
     type: "POST", 
     data : {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value}, 
       name: name, email: email; company: company, 
       }, 
     success: function(data){ 
      // do something 
      //$('#login-form').css('display','inline-block'); 
      $('#ownerform').css('display','none'); 
      $('#formmessage').css('display','inline-block'); 
      $('#formmessage').html(data); 

     }, 
    }); 

    }); 
    }; 

}); 

私はここで何かが足りないのですか？私はカスタムメソッドを省略する場合。その後、パート1は正常に動作します。私は、ドキュメントが読み込まれたときに隠された要素と関係があると考えています。

Answer 1

は、私はあなたがどんな `ブラウザのコンソールerrors`方法ownermethod()このクリックイベント外ハンドラ

<script> 

$(document).ready(function(){ 

     $('#btn1').click(function(){ 
     $('#login-form').css('display','none'); 
     $('#ownerform').css('display','inline-block'); 
    }); 

    ownermethod(); 

    $('#btn2').click(function(){ 
     $('#login-form').css('display','inline-block'); 
     $('#ownerform').css('display','none');  
    }); 

}); 

function ownermethod() 
{ 
... 
} 

</script>