复选框不会保持检查状态，提交监听器不起作用

Question

我使用Handlebars.js动态呈现页面，我有一个“测验表单模板”，其中包含以下代码：

<div id="right-pane">
        <script type="text/x-handlebars-template" id="quiz-form-template">
            <form class="cf" id="quiz-form">
                <h2>Create a <span>quiz</span></h2>
                <p>Enter a quiz name and description to get started.</p>

                <div>
                    <input type="text" name="quiz-name" placeholder="Quiz Name" />
                </div>

                <div>
                    <textarea rows="5" cols="40" name="quiz-description"
                        placeholder="Description"></textarea>
                </div>

                <div id="checkbox">
                    <input type="checkbox" name="is_random" />  Create randomly generated quiz <br/>
                    <input type="checkbox" name="is_single_page" />  Render quiz on a single page <br/>
                    <input type="checkbox" name="is_immediate"/>  Give immediate feedback <br/>
                </div>

                <input type="submit" class="btn" value="Add Questions" /> 

            </form>
        </script>
    </div>

我遇到了两个问题，我一直试图调试无济于事。在我的html上渲染此页面后，当我单击复选框时，它们根本不会被检查。看起来我点击它“几乎反弹”。

此外，当我单击提交按钮时，它没有被收听。我是console.log“ging”要检查并且它们不输出。这是我的事件监听器：

rightPane.addEventListener("submit", function(event) {
    console.log( event.target );
    event.preventDefault;

    if ( event.target.value === "Add Questions" ) {

        //DOM elements
        newQuizName = document.querySelector('#quiz-form input');
        newDescription = document.querySelector('#quiz-form textarea');
        randomStatus = document.querySelector('#quiz-form input[name="is_random"]');
        singlePageStatus = document.querySelector('#quiz-form input[name="is_single_page"]');
        immediateStatus = document.querySelector('#quiz-form input[name="is_immediate"]');

        var pendingQuiz = getPendingQuiz();
        pendingQuizMetaData = {name: newQuizName.value, description: newDescription.value, 
            random: randomStatus.checked, singlePage: singlePageStatus.checked, 
            immediate: immediateStatus.checked 


        pendingQuiz = { metadata: pendingQuizMetaData, questions: [] };
        updatePendingQuiz( pendingQuiz );
        rightPane.innerHTML = templates.renderQuestionType();

        newQuestion = "";
        newSubject = "";
        // }

        // Since add questions is clicked, we should send the user to select question type

        // we'll need to render html on the right pane

    } 

});

任何输入都将不胜感激。