Question

我有一个从MySQL查询生成的html按钮组：

$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将菜单on.change推入javascript，但是对于这种情况，按钮组会更好。

作为按钮组的新手，我的理解是我应该监听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>

任何帮助将不胜感激。

单击HTML按钮组时运行Javascript

0 个答案: