javascript - 为什么我的$(“。selector”)。show(900);代码仅在浏览器控制台中启动，而从不在助手中启动？

我的Template.home.helpers中的$(".submitNumberForm").show(900);代码无法启动。但是，当代码在浏览器控制台中运行时，它可以完美运行。

$(".submitNumberForm").show(900);无法在Template.home.helpers中运行的事实意味着，永远不会显示由类名称：.submitNumberForm表示的HTML表单，并保持隐藏状态。

如果有人请解释我的代码出了什么问题，我将不胜感激。

在下面找到我的帮助代码：../client/main.js，请特别注意$(".submitNumberForm").show(900);。

Template.home.helpers({

    'displaySubmitForm': function () {

        var verificationCode = Meteor.user().profile.telephoneNumberVarificationCode;
        var verificationCodeTest = Meteor.user().profile.telephoneNumberVarified;

        if( typeof verificationCode === 'undefined' && typeof verificationCodeTest === 'undefined'){
                console.log("displaySubmitForm verificationCode: " +verificationCode);
                console.log("displaySubmitForm verificationCodeTest: " +verificationCodeTest);

                alert("displaySubmitForm: TRUE");

                $(".submitNumberForm").show(900);

                return true;
            }

        else {
                alert("displaySubmitForm: FALSE");

                $(".submitNumberForm").hide(900);

                return false;
            }
    }

});

刷新home页时，浏览器控制台将打印出：

displaySubmitForm verificationCode: undefined
displaySubmitForm verificationCodeTest: undefined

警报功能将显示一个弹出窗口，显示：displaySubmitForm: TRUE，但是$(".submitNumberForm").show(900);不会启动！

在下面找到我的：<template name="home">代码../client/main.html。请注意，模板顶部/开头的{{displaySubmitForm}}显示单词true，但是HTML表单submitNumberForm的其余部分根本不显示。这再次表明$(".submitNumberForm").show(900);代码未启动

<template name="home">
{{displaySubmitForm}}

    {{#if displaySubmitForm}}

        <div class="form-group submitNumberForm">

            <div class="col-sm-10">
                    <input type="number" class="form-control" id="telephoneNumber" placeholder="Enter Number"  name="telephoneNumber">
            </div>

            <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="submitNumber" class="btn btn-primary btn-block">Submit</button>
            </div>
            </div>

        </div>

    {{else}}

    {{/if}}

</template>

在我的CSS文件下面找到：.../client/main.css

.submitNumberForm{
    display: none;
}

为了澄清起见，HTML格式submitNumberForm默认情况下是隐藏的，并且仅根据$(".submitNumberForm").show(900);中指定的条件显示Template.home.helpers

再次，当我从帮助程序中复制代码时，粘贴并在控制台中运行时，将显示HTML表单submitNumberForm。谁能向我解释为什么$(".submitNumberForm").show(900);不能在助手中启动？

最佳答案

当使用{{#if displaySubmitForm}}时，它表示：当{{#if}}返回true时，在{{/if}}和displaySubmitForm helper标记之间生成html代码。

帮助程序执行时，if中的html元素不存在。
因此，您的选择器：代码中的$(".submitNumberForm")不会选择任何内容，因为SubmitNumberForm元素尚不存在。

之后，它可以在控制台上运行，因为帮助程序已经执行，并且现在生成了html。