如何在單擊<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();
});