在 javascript 中，按钮的单击事件未在循环外运行

问：

我正在编写一个网站程序，以根据提供的输入随机创建团队。最初，用户需要提供需要组队的玩家数量，并且应该是偶数。之后，用户需要提供所有球员的名字，以便将名称排序为球队。程序的第二部分（在提供名称后）只能在第一部分的 IF 循环中工作，但不能在 IF 循环之外工作。

let inputNumber = "";
        let i = 0;
        let players = new Array();
        let random = "";
        let j = "";

        $("#button").click(function()
        {
            inputNumber = $('#number_input').val();

            // console.log('the input number provided is: ' + inputNumber);
            if (inputNumber >= "1" && (inputNumber % 2) == 0) 
            {
                $('#form').addClass('no_display');
                $('#form').removeClass('display');
                $('#list').addClass('display');
                $('#list').removeClass('no_display');

                for (i = 0; i < inputNumber; i++) 
                {
                    $('#list-form').append(' <div class="input-group"><input required type="text"class="form-control playerNames" placeholder="Enter Player Name" id="'+i+'"></div>');
                }
                $('#list-form').append('<div class="d-flex justify-content-center"><button class="btn btn-primary" type="button" id="listSubmit" >Submit</button></div>');

                // console.log($('#list').html());
                
                // alert('given number is even')
                $('#listSubmit').click(function()
                    {
                        alert('button1 is clicked');
                        $("input.playerNames").each(function()
                        {
                            // console.log("The id of the current input is: " + $(this).val());
                            players.push($(this).val());
                        })
                        // console.log('the players includes ouptput is: '+players.includes("",0)); 
                        // console.log(players);

                        let temp = players.includes("",0);
                        i = 0;
                        if(temp == true)
                        {
                            players.splice(0, players.length);
                            $('#dangerAlert').removeClass('no_display').addClass('display');
                        }
                        else
                        {
                            $('#dangerAlert').removeClass('display').addClass('no_display');
                            while (players.length != 0) 
                            {
                                // i=0;
                                let arrayExtract = new Array();

                                for(let j = 0; j< 2; j++)
                                {
                                    random = Math.floor(Math.random() * players.length)
                                    // console.log('the generated random number is: '+ random);
                                    arrayExtract.push(players[random]);
                                    
                                    players.splice(random, 1);
                                }
                                // console.log(arrayExtract);
                                i = i+1;
                                $("#teamsDiv").append('<div class= "container teams"><p class="text-center fs-3 fw-bold text-decoration-underline">Team' + i+ '</p> <p class="text-center fs-4">'
                                +arrayExtract[0]+', '+ arrayExtract[1] + '</P> </div>');
                                arrayExtract.splice(0, arrayExtract.length);                        
                            }
                            $('#list').removeClass('display');
                            $('#list').addClass('no_display');
                        }
                    })
            }
            else if((inputNumber % 2) != 0)
            {
                alert('Please enter a even number');
                $('#number_input').val('');
            }
            else if(inputNumber < "1")
            {
                alert('Please provide a number to continue');
            }
        }
        )

上面的代码工作正常。但是，如果我将 LISTSUBMIT 单击事件移到 if 循环之外，它就不起作用。

 $("#button").click(function()
        {
            inputNumber = $('#number_input').val();

            // console.log('the input number provided is: ' + inputNumber);
            if (inputNumber >= "1" && (inputNumber % 2) == 0) 
            {
                $('#form').addClass('no_display');
                $('#form').removeClass('display');
                $('#list').addClass('display');
                $('#list').removeClass('no_display');

                for (i = 0; i < inputNumber; i++) 
                {
                    $('#list-form').append(' <div class="input-group"><input required type="text"class="form-control playerNames" placeholder="Enter Player Name" id="'+i+'"></div>');
                }
                $('#list-form').append('<div class="d-flex justify-content-center"><button class="btn btn-primary" type="button" id="listSubmit" >Submit</button></div>');

                // console.log($('#list').html());
                
                // alert('given number is even')
                
            }
            else if((inputNumber % 2) != 0)
            {
                alert('Please enter a even number');
                $('#number_input').val('');
            }
            else if(inputNumber < "1")
            {
                alert('Please provide a number to continue');
            }
        }
        )
        $('#listSubmit').click(function()
                    {
                        alert('button1 is clicked');
                        $("input.playerNames").each(function()
                        {
                            // console.log("The id of the current input is: " + $(this).val());
                            players.push($(this).val());
                        })
                        // console.log('the players includes ouptput is: '+players.includes("",0)); 
                        // console.log(players);

                        let temp = players.includes("",0);
                        i = 0;
                        if(temp == true)
                        {
                            players.splice(0, players.length);
                            $('#dangerAlert').removeClass('no_display').addClass('display');
                        }
                        else
                        {
                            $('#dangerAlert').removeClass('display').addClass('no_display');
                            while (players.length != 0) 
                            {
                                // i=0;
                                let arrayExtract = new Array();

                                for(let j = 0; j< 2; j++)
                                {
                                    random = Math.floor(Math.random() * players.length)
                                    // console.log('the generated random number is: '+ random);
                                    arrayExtract.push(players[random]);
                                    
                                    players.splice(random, 1);
                                }
                                // console.log(arrayExtract);
                                i = i+1;
                                $("#teamsDiv").append('<div class= "container teams"><p class="text-center fs-3 fw-bold text-decoration-underline">Team' + i+ '</p> <p class="text-center fs-4">'
                                +arrayExtract[0]+', '+ arrayExtract[1] + '</P> </div>');
                                arrayExtract.splice(0, arrayExtract.length);                        
                            }
                            $('#list').removeClass('display');
                            $('#list').addClass('no_display');
                        }
                    })

上面的代码不起作用。

我想知道为什么如果代码在第一部分的循环之外，listSubmit 点击事件代码不起作用。