Firefox/Javascript - 跟蹤點擊按鈕時發生了什麼

Question

當我點擊添加的幾個新按鈕時，發生了一些奇怪的事情。他們工作正常，但他們繼續滾動頁面回到屏幕的頂部。我認爲我的代碼中有其他東西導致它，因爲我確實在其他地方有這種行爲，但我無法弄清楚什麼是干擾（我的代碼在這一點上是非常大的）。

當我點擊我的按鈕時，計算出發生了什麼的最簡單方法是什麼？我知道F12調試器的基礎知識，但除此之外，我有點無知。我讀過關於事件處理程序等的內容，但從未使用它們，所以希望有一種更簡單的方法來追蹤這種情況。

下面是按鈕代碼。它看起來很好，它做它應該做的事情，但也有不必要的行爲。

$(document).on('click', '.friendly_submit', function() { 
    // Work out our team ID. 
    var OurTeamIDF = $('div').find('[data-ourteamid]'); 
    var OurTeamID = OurTeamIDF.data('ourteamid'); 
    var OpponentID = $(this).closest('form') 
          .find('.friendly_opponent') 
          .find(':selected').attr('data-OpponentID'); 
    var Venue = $(this).closest('form') 
         .find('.friendly_venue') 
         .find(':selected').text(); 
    var WhichFriendly = $(this).closest('form').attr('data-WhichFriendly'); 

    $.post('scripts/randomfriendly.php', 
      { 
       OurTeamID : OurTeamID, 
       OpponentID : OpponentID, 
       Venue : Venue, 
       WhichFriendly : WhichFriendly 
      }, 
      function (data) { 
       console.log(data); 
      } 
    ) 
}); 

而且HTML代碼如下。

echo "<form data-WhichFriendly = 0 class = 'box_center center'>"; 
    echo "<fieldset class = 'random_friendly_fieldset box_center'>"; 
     echo "<legend>Random Friendly</legend>"; 
     //echo "<p class = 'bold center underline'>Choose Opponent</p>"; 

     echo "Choose Opponent : <select class = 'friendly_opponent'>"; 
      foreach ($AllTeamsArray as $Team) { 
       // Don't include ourselves in the list. 
       if (trim($Team['Name']) <> trim($OurTeamName)) { 
        $TeamID = $Team['ID']; 
        echo "<option data-OpponentID = $TeamID>" . $Team['Name'] . " (" . $Team['League'] . ")</option>"; 
       } 
      } 
     echo "</select></br></br>"; 

     echo "Venue : <select class = 'friendly_venue'>"; 
      echo "<option>Neutral</option>"; 
      echo "<option>Home</option>"; 
      echo "<option>Away</option>"; 
     echo "</select></br></br>"; 

     echo "<button class = 'friendly_submit'>Submit</button>"; 
    echo "</fieldset>"; 
echo "</form>"; 

Answer 1

有跡象表明，跳到我的腦海兩件事情：

1）按鈕type="submit"並提交表單（這將導致頁面刷新）

2）按鈕鏈接被設置爲href="#'

編輯

現在你甲肝e發佈了你的代碼，我正在更新我的答案。

更改您的代碼，以便在窗體上捕獲提交事件而不是捕獲按鈕上的單擊事件。

$("#add-form-id-here").submit(function(event) { 
    event.preventDefault(); 

    //change your handler so you get the correct values etc here. 
}); 

然後確保你添加一個type="submit"到你的按鈕。

Answer 2

嘗試添加此：

event.preventDefault（）;

event.stopPropagation（）;

$(document).on('click', '.friendly_submit', 
    function() { 

     // Work out our team ID. 
     var OurTeamIDF = $('div').find('[data-ourteamid]'); 
     var OurTeamID = OurTeamIDF.data('ourteamid'); 
     var OpponentID = $(this).closest('form').find('.friendly_opponent').find(':selected').attr('data-OpponentID'); 
     var Venue = $(this).closest('form').find('.friendly_venue').find(':selected').text(); 
     var WhichFriendly = $(this).closest('form').attr('data-WhichFriendly'); 

     event.preventDefault(); 
     event.stopPropagation(); 

     $.post('scripts/randomfriendly.php', 
      { 
       OurTeamID : OurTeamID, 
       OpponentID : OpponentID, 
       Venue : Venue, 
       WhichFriendly : WhichFriendly 
      } , 
     function (data) { 
      console.log(data); 
     }) 


});