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();
});

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

3 个答案: