javascript - Div 内容在出现大约几毫秒后消失

Question

HTML：

<form id='pool_play'>
    <?php           
        $PLAYERS = 8;
        for ($i=1; $i <= $PLAYERS; $i++) { 
            print $i . ' <input type="text" class="initial_players" autofocus> <br/>';
        }
    ?>
    <br>
    <button type="submit" class="random"> Randomize bracket</button>
</form>
<p class="debug"></p>

js：

$("#pool_play").submit(function(event) {
    var participants = $('.initial_players').map(function() {
        return $(this).val();
    }).get();

    for (var i = 0; i < participants.length; i++) {
        $('p.debug').append(participants[i] + " ");
    }
});

我基本上尝试做的是，当表单提交时，打印段落标签#pool_play中输入框的内容。.debug发生的情况是它出现了几毫秒然后消失了。我的猜测是提交页面时，旧数据（即.debug填充后的段落内容）被丢弃。提示？

Answer 1

您可以阻止页面提交使用event.preventDefault()

$("#pool_play").submit(function(event) {
    var participants = $('.initial_players').map(function() {
        return $(this).val();
    }).get();

    for (var i = 0; i < participants.length; i++) {
        $('p.debug').append(participants[i] + " ");
    }
    event.preventDefault();//stops submit
});

Answer 2

您需要阻止提交操作，否则页面将重新加载而不更改页面。

$("#pool_play").submit(function(event) {
    var participants = $('.initial_players').map(function() {
        return $(this).val();
    }).get();

    for (var i = 0; i < participants.length; i++) {
        $('p.debug').append(participants[i] + " ");
    }

    event.preventDefault();
    return false;
});

但是，将按钮更改为 abutton而不是 a可能是一个更好的主意submit

<button type="button" class="random"> Randomize bracket</button>

Answer 3

看代码。您捕获submit事件，获取打印它们的数据......然后您退出您的功能，因此submit事件的默认操作由浏览器执行，因为您不会停止它。这就是为什么您只能在几毫秒内看到此内容 - 浏览器正在刷新页面。

您应该使用event.preventDefault()函数来阻止浏览器在执行您的函数后提交表单。