javascript - JQuery 无法分配给“#back”上的属性“guid”：不是对象

Question

我正在编写一个 Node.js 游戏，我正在使用 jquery 将所有按钮点击绑定到方法。我的大部分工作，除了一个。它抛出错误can't assign to property "guid" on "#back": not an objectBack is a button in my html 文件。

我的 html 页面只是一个页面，其中包含一堆不同的脚本，当它们需要被 dipalyed 时，我将它们插入到 gameArea div 中。这是我用于后退按钮的脚本的示例。

<script id="hostJoinGame" type="text/template">
  <h1>The host has join the game</h1>
  <button id="startGame"> StartGame </button>
  <button id='back'>Back</button>
</script>

        init: function() {
            App.cacheElements();
            App.showInitScreen();
            App.bindEvents();

        },

        cacheElements: function () {
            App.$doc = $(document)

            //host screens
            App.$gameArea =$('#gameArea');
            App.$introScreen =  $('#intro-screen').html();
            App.$hostJoinGame =  $('#hostJoinGame').html();
            App.$hostWaitingScreen =  $('#roundStart').html();
            App.$hostDuelScreen =  $('#hostDuelScreen').html();
            App.$hostDisplayLeaderboard =  $('#hostDisplayLeaderboards').html();
            App.$endOfGame =  $('#endOfGame').html();

            //player screens
            App.$playerJoinGame = $('#playerJoinGame').html();
            App.$playerSetsName = $('#playerSetsName').html();
            App.$playerAnswer = $('#playerAnswer').html();
            App.$playerWaitingScreen = $('#playerWaitingScreen').html();
            App.$playerVotingScreen = $('#playerVotingScreen').html();

        },      /**
         * Listens for events on the webpage
         */
        bindEvents: function () {

            App.$doc.on('click', '#createGame', App.Host.onCreateClick);
            App.$doc.on('click', "#joinGame", App.Player.onJoinClick);
            App.$doc.on('click', "#startGame", App.Host.startGame);
            App.$doc.on('click', "#submit", App.Player.setName);
            App.$doc.on('click', "#back", App.showInitScreen);
            //  App.$doc.on('submit', "#answerSubmit", App.Game.Answer);
            //App.$doc.on('click', "#box1", App.Player.vote(1));
            //App.$doc.on('click', "#box2", App.Player.vote(2));
            //App.$doc.on('click', "#playAgain", App.Host.startGame());
            //App.$doc.on('click', '#quit', App.showInitScreen);


        },




        showInitScreen: function () {
            App.$gameArea.html(App.$introScreen);
        },
        

这是我在 chrome 控制台中收到的错误消息

Uncaught TypeError: can't assign to property "guid" on "#back": not an object
    jQuery 6
        add
        on
        each
        each
        on
        on
    bindEvents http://localhost:3000/app.js:113
    init http://localhost:3000/app.js:81
    <anonymous> http://localhost:3000/app.js:368
    jQuery 2
        mightThrow
        process
jquery.3.6.0.js:5221:4
    jQuery 6
    bindEvents http://localhost:3000/app.js:113
    init http://localhost:3000/app.js:81
    <anonymous> http://localhost:3000/app.js:368
    jQuery 2
        mightThrow
        process

我不确定为什么 jquery 试图将我的 html 中的脚本 id 绑定到一个对象中。谢谢您的帮助。

标签： javascriptjquerynode.js