Запускайте Javascript по щелчку группы кнопок HTML - PullRequest
Новая
       16

Запускайте Javascript по щелчку группы кнопок HTML

0 голосов
/ 15 апреля 2019

У меня есть группа кнопок HTML, сгенерированная из запроса MySQL: 

$year = 2019;

$myQuery = $wpdb->get_results('SELECT DISTINCT(player_team) FROM afl_master WHERE year = '.$year.' ORDER BY player_team ASC');

if($myQuery){
echo '  <div class="btn-group"  name="afl_team" id="afl_team" style="width:100%">';
foreach ( $myQuery as $result ) 
    {
    echo '    <button style="width:100%" value="'.$result->player_team.'">'.$result->player_team.'</button>';
    }
echo '  </div>';
}

Для всех намерений и целей это то же самое, что и ниже (для повторного производства): 

<div class="btn-group"  name="afl_team" id="afl_team" style="width:100%">
<button style="width:100%" value="team_1">team_1</button>
<button style="width:100%" value="team_2">team_2</button>
</div>

Обычно я бы использовал раскрывающееся меню, а затем переместил меню value в javascript, используя on.change, однако для этого случая группа кнопок будет намного лучше.

Будучи новичком в группах кнопок, я понимаю, что вместо этого я должен прислушиваться к событию on.click, поэтому я изменил свой обычный сценарий ниже, однако я не могу заставить это работать. Как мне запустить JavaScript, когда:

(1) Нажата новая кнопка

(2) Страница загружена (первая кнопка должна быть активна) 

<script type="text/javascript">
jQuery(document).ready( function($) {
    jQuery('#afl_team').on( 'click', function () {
         afl_team = $('#afl_team').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_team_stats',
            afl_team: afl_team,
        },
         success:function(output){
             jQuery('#stats').html( output );
         }
     });
    }).click();
});
</script>

Любая помощь будет принята с благодарностью.

...