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


});