Javascript 为什么当我按下只调用一次函数的按钮时，我的函数被多次调用？

我有一个程序，当按下一个按钮时生成足球固定装置。然后，设备将显示在屏幕上。首先，我需要在刷新页面之前按下按钮2次，以便生成和显示设备。之后，有时当我按下按钮时，我会看到生成了多行，这意味着该函数在按下按钮时被调用多次，有时它只被调用一次，夹具只生成一次

fixture.php HTML

生成装置

每次执行

$（'.center'）。单击（…

）将添加（在本例中，当您单击按钮时）一个事件侦听器，因此如果执行10次

$（'.center'）。单击（…

），您将有10个侦听器。解决方案是只添加一次侦听器。示例：

$（'.center'）。单击（函数（e）{
log（“任何您想要的”）
})；

单击此处

您需要多次按下该按钮，因为单击按钮时会将事件侦听器附加到该按钮。只需在HTML或JS中添加侦听器，不要同时执行这两项操作。

$teams = array("FC FCSB", "AFC Astra Giurgiu", "FC Dinamo 1948", "FC Viitorul 2009", "CSM Politehnica Iasi", "Universitatea Craiova", "FC Botosani", "CFR 1907 Cluj");
$fixPair = new Fixture($teams);
$schedule = $fixPair->getSchedule();
$i = 1;
foreach ($schedule as $rounds) {
    echo "<h5> Etapa " . $i . " </h5>";
    foreach ($rounds as $game) {
        echo "{$game[0]} vs {$game[1]}<br>";
    }
    echo "<br>";
    $i++;
}
echo "<hr>";

function genereazaEtape() {
            $('.center').click(function(e){
                e.preventDefault();
                var clickBtnValue = $(this).val();
                var ajaxurl = 'fixture.php',
                data =  {'action': clickBtnValue};
                $.post(ajaxurl, data, function (response) {
                    $("#demo1").html(response);
                });
            });
        };

<button type="submit" class="center" onclick="genereazaEtape()"> Generate Fixtures</button>
    <div id="demo1"></div>