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="#' 的链接

编辑

既然你已经发布了你的代码，我正在更新我的答案。

更改您的代码，以便捕获表单上的提交事件，而不是捕获按钮上的单击事件。

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


});