Question

我正在尝试执行两项操作 - 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部分工作正常。我相信，这与隐藏元素有关，因为当文档加载时，form1btn被隐藏。

Answer 1

我建议你在click事件处理程序

之外调用方法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>

如何处理当前隐藏元素的jquery事件

1 个答案: