如何在单击<button>使用jquery中</button>定义的按钮时显示表格

Question

我想在单击按钮时显示表格。 以下代码无法正常工作。 该表已显示，但很快页面被​​重新加载，并且再次变为空白。 该表仅可见几秒钟。 这是我尝试过的。

    <form class="form-horizontal form-label-left top_margin pad-top-20">

                            <div class="form-group">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">Select Class</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                      <select class="form-control" name="Term-select">
                                        <option value="0">None Selected</option>
                                        <option value="1">1st Standard</option>
                                        <option value="2">2nd Standard</option>
                                        <option value="3">3rd Standard</option>
                                        <option value="4">4th Standard</option>
                                        <option value="5">5th Standard</option>
                                        <option value="6">6th Standard</option>
                                        <option value="7">7th Standard</option>
                                        <option value="8">8th Standard</option>
                                        <option value="9">9th Standard</option>
                                        <option value="10">10th Standard</option>
                                        <option value="11">11th Standard</option>
                                        <option value="12">12th Standard</option>
                                      </select>
                                    </div>
                             </div>

                   <div class="form-group">
                     <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-4">
                        <button class="btn btn-success float-right" id="Class_submit">Submit</button>
                       </div>
                  </div>            
     </form>
     <script>
        $(document).ready(function(){
        $("#Class_submit").click(function(){
        $("#Class_Marks").show();
        });
        });
     </script>

Answer 1

默认情况下，表单内部的<button>用作<button type="submit">
使用preventDefault()或使<button type="button">

$("#Class_submit").click(function(event){
     event.preventDefault();
     $("#Class_Marks").show();
});

Answer 2

这是因为您的<button>在<form> 。 默认情况下，当按钮在表单中时，单击该按钮将提交表单。 这将导致页面刷新。

尝试执行此操作，以防止该默认操作：

    $(document).ready(function(){
      $("#Class_submit").click(function(event){
        event.preventDefault();
        $("#Class_Marks").show();
      });
    });

编辑：另外，请确保您的ID匹配：您的Javascript包括$("#Class_submit") ，但没有id="Class_submit"元素。 有 id="Class-submit" ，连字符-而不是下划线_ 。

Answer 3

1）您在dom元素中定义了ID Class-submit 。 但您在jquery代码中使用id Class_submit 。 请确保您为ID使用连字符还是下划线。

2）使用event.preventDefault(); 如果调用此方法，则不会触发事件的默认操作。

$("#Class_submit").click(function(event){
     event.preventDefault();
     $("#Class_Marks").show();
});