为什么使用Handlebars.js渲染后，我的HTML表单输入元素为什么不能被关注？

Question

我目前正在为我的单页应用程序开发一个表单。一个人单击链接后，我正在使用Vanilla Router和Handlebars.js呈现HTML表单。呈现模板后，表单将显示在页面上，但是我无法选择表单输入字段或在其中输入数据。

这是我的app.js文件：

window.addEventListener('load', () => {
const el = $('#app');
var todoMain = null;

// Compile Handlebar Templates
const errorTemplate = Handlebars.compile($('#error-template').html());
const todoListTemplate = Handlebars.compile($('#todo-list-template').html());
const loginTemplate = Handlebars.compile($('#todo-login-template').html());
const homeTemplate = Handlebars.compile($('#todo-home-template').html());
const todoCreateTemplate = Handlebars.compile($('#todo-create-template').html());

const router = new Router({
    mode: "history",
    page404: (path) => {
        const html = errorTemplate({
            title: "Error 404 - Page Not Found"
        });

        el.html(html);
    }
});

router.add("/login", () => {
    let html = loginTemplate();
    el.html(html);

    $("#submit").on("click", (event) => {
        let username = $("[name='username']").val();
        let password = $("[name='password']").val();

        $.ajax({
            type: "POST",
            url: "/api/login",
            data: {
                username: username,
                password: password
            },
            success: function(data) {
                if(data.loggedIn == 1) {
                    alert(data.username);
                    //TODO: create function pre-populate;
                    router.navigateTo("/todo");
                }
            }
        });
    });
});

router.add("/", () => {
    let html = homeTemplate();
    el.html(html);
});

router.add("/todo", () => {
    let html = todoListTemplate();
    el.html(html);

    $('.todo-list-menu-anchor').on("click", (event) => {
        // Block Browser Page Load
        event.preventDefault();

        const target = $(event.target);

        const href = target.attr("href");
        const path = href.substr(href.lastIndexOf("/"));

        router.navigateTo(path);
    });

    todoMain = $("#todo-main");
});

router.add("/todo_create", () => {
    let html = todoCreateTemplate();
    todoMain.html(html);
});

$('.menu-anchor').on("click", (event) => {
    // Block Browser Page Load
    event.preventDefault();

    const target = $(event.target);

    const href = target.attr("href");
    const path = href.substr(href.lastIndexOf("/"));

    router.navigateTo(path);
});

router.navigateTo("/");


});

此外，这是把手模板。

<script id="todo-create-template" type="text/x-handlebars-template">
    <h1>Create Todo</h1>
    <div id="create-todo-table">
        <div id="create-todo-table-body">
            <form action="." method="GET">
                <div class="create-todo-table-row">
                    <div class="create-todo-table-cell">
                        <p>Parent Todo: 

                            <!-- Pre-populate -->
                            <select id="parent-todo-create">

                            </select>

                        </p>
                    </div>
                </div>
                <div class="create-todo-table-row">

                    <p><scan class="required">*</scan>Name:
                        <input type="text" name="name" size="64" />
                    </p>
                </div>
            </form>
        </div>
    </div>
</script>

我想知道Handlebars是否在字段上禁用了onmousedown事件。我尝试通过以下操作来查看是否可以覆盖这种情况：

<input type="text" onmousedown="this.select()" />

不幸的是，那没有用。

编辑：另一个值得注意的事情是，我在已经渲染的下面的模板中渲染上面的模板。这是另一个模板的代码：

<script id="todo-list-template" type="text/x-handlebars-template">
    <div id="todo-table">
        <div id="todo-table-body">
            <div id="todo-table-row">
                <div id="todo-table-cell-left" class="todo-table-cell">
                    <div id="todo-list-menu-table">
                        <div id="todo-list-menu-body">
                            <div id="todo-list-menu-column">
                                <div id="todo-list-menu-cell">
                                    <a class="todo-list-menu-anchor" href="/todo_create" >Create Todo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="todo-table-cell-right" class="todo-table-cell">
                    <a href="noob"> What? </a>
                    <div id="todo-main">
                        <!-- Inner Template -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

编辑2：我已尝试使用局部函数，但仍无法正常工作。