содержания 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> 

ЯШ:

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

Вы должны предотвратить представить действие или страница будет просто перезагрузить без ваших изменений страницы.

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

Это может быть лучшей идеей, однако, чтобы изменить кнопку на button вместо submit

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

Answer 2

Вы можете предотвратить страницу от представления с помощью 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 3

Посмотрите на код. Вы ловили submit событие, получая данные, печатающие их ... И затем вы выходите из своей функции, поэтому действие по умолчанию для события submit выполняется браузером, потому что вы его не останавливаете. Вот почему вы видите этот контент только в miliseconds - браузер обновляет страницу.

Вы должны использовать функцию event.preventDefault(), чтобы предотвратить отправку формы браузером после выполнения вашей функции.