爲什麼我的<div> content</div>閃爍？

Question

我對Jquery世界很陌生，所以有人可以幫我理解我的做我的$("#dothis").html("hit");使內容只眨眼，而不是簡單地顯示？ 我認爲該功能是重複它自我，這就是它造成的。

HTML代碼：

 <form> 
     <select class="plcardFirst"> 
      <option selected value="">-- Choose One --</option> 
      <option value="1/11">A</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
      <option value="10">J</option> 
      <option value="10">Q</option> 
      <option value="10">K</option> 
      </select> 
     <select class="plcardSecond"> 
      <option selected value="">-- Choose One --</option> 
      <option value="1/11">A</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
      <option value="10">J</option> 
      <option value="10">Q</option> 
      <option value="10">K</option> 
      </select> 
     <select class="dlCard"> 
      <option selected value="">-- Choose One --</option> 
      <option value="1/11">A</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
      <option value="10">J</option> 
      <option value="10">Q</option> 
      <option value="10">K</option> 
      </select> 
      <input type="submit" value="Submit" id="Submit"> 
     </form> 
    <div id="dothis"> do this </div> 

腳本：

 <script type="text/javascript"> 
      var valueFirst; 
      var valueSecond; 
      var dlCard; 
      $(document).ready(function() { 
      $(".plcardFirst").change(function() { 
       valueFirst = $(".plcardFirst").val();//player first card; 
      }); 
      $(".plcardSecond").change(function() { 
       valueSecond = $(".plcardSecond").val();//player second card 
      }); 
      $(".dlCard").change(function() { 
       dlCard = $(".dlCard").val();//dealer card 
      }); 
      $("#Submit").click(function(){ 
       $("#dothis").html("hit"); 
      }); 
     }); 
    </script> 

Answer 1

它閃爍，因爲你正在使用一個提交按鈕，因此網頁提交表單並重新加載頁面，你不取消提交操作。

$("#Submit").click(function (e) { 
    e.preventDefault(); //cancel the click 
    $("#dothis").html("hit"); 
}); 

Answer 2

你不得不取消事件，不提交表單：

$("#Submit").click(function(event){ 
    $("#dothis").html("hit"); 
    return false; 
}); 

或者你可以簡單地刪除<形式>標籤，如果你不打算處理通過PHP和它的數據將不會再發生。

Answer 3

您的頁面正在再次加載，因爲它是一個窗體，並且您有一個type = submit的按鈕。您需要通過添加e.preventDefault（）來防止其正常功能。試試這個：

<script> 
$("#Submit").click(function(e) { 
    e.preventdefault(); 
    $("#dothis").html("hit"); 
}); 
</script> 

Answer 4

你正在提交表單，因此頁面得到刷新/刷新。您可以更改按鈕類型，然後嘗試

<input type="button" value="Submit" id="Submit"> 

Answer 5

如果您要提交表單，頁面會刷新，並且您將獲得初始div內容。

如果您不想提交表單，則必須在函數中返回false。

$("#Submit").click(function() { 
      $("#dothis").html("hit"); 
      return false; 
     });