无法从 JS 函数访问组合答案

【问题标题】：Can't access combodate from JS function无法从 JS 函数访问组合
【发布时间】：2015-02-20 21:35:13
【问题描述】：

我怀疑我遇到的问题只是对 JS 范围之类的误解。

我已经链接了 moment.js 和 combodate.js，并且在我的表单之后立即运行以下代码可以正常工作：

<script type="text/javascript">
    $(function(){
        $('#birthday').combodate();
    });
</script>

但如果我想在函数中运行它（例如清除表单）：

var launchChildRegisterModal = function() {
    //Do other stuff...
    $('#birthday').combodate();
}

我得到错误：

TypeError: $(...).combodate is not a function

我必须做一些特殊的事情才能在函数中使用它吗？

编辑：澄清一下，以下代码确实有效：

<form id="register-form" action='<?= base_url('user/register/' . issetor($invite_code, '')) ?>' method="POST">
        <!-- Account Type hidden form element-->
        <input type="hidden" name="account_type" class="form-control" id="account_type" value="<?= issetor($_GET['account_type'], '') ?>" />

        <div class="control-group"> 
          <!-- First Name --> 
          <!--<label class="control-label"  for="first_name">First Name</label>-->
          <div class="controls">
            <input type="text" id="first_name" name="first_name" placeholder="First Name" value="<?=isset($set_values['first_name'])? $set_values['first_name'] : ''?>" required>
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group" id="last_name_group"> 
          <!-- Last Name --> 
          <!--<label class="control-label"  for="last_name">Last Name</label>-->
          <div class="controls">
            <input type="text" id="last_name" name="last_name" placeholder="Last Name" value="<?=isset($set_values['last_name'])? $set_values['last_name'] : ''?>">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group" id="username_group" style="display: none;"> 
          <!-- Username --> 
          <!--<label class="control-label" for="username">Username</label>-->
          <div class="controls guidingText">
            <input type="text" id="username" name="username" placeholder="Username" value="<?=isset($set_values['username'])? $set_values['username'] : ''?>">
            <p>Username can contain any letters or numbers, but must be 20 characters or less.</p>
          </div>
        </div>
        <div class="control-group" id="email_group"> 
          <!-- Email --> 
          <!-- <label class="control-label" for="email">Email </label>-->
          <div class="controls">
            <input type="text" id="email" name="email" placeholder="Email" value="<?= issetor($set_values['email'], issetor($parent_email, '')) ?>">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group" id="gender_group" style="display: none;"> 
          <!-- Gender -->
          <!--<label class="control-label"  for="gender">Gender</label>-->
          <div class="controls">
            <select name="gender" id="gender" class="genderSelect" value="<?=isset($set_values['gender'])? $set_values['gender'] : 'Gender'?>">
              <option>Gender</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
        <div class="control-group" id="birthday_group" style="display: none;"> 
          <!-- Birthday --> 
          <div class="controls input-append date">
          <p>Birthday</p>
            <input type="text" id="birthday" class="bdateSelect" name="birthday" placeholder="Birthday" data-format="MM/DD/YYYY" data-template="MMM / D / YYYY" value="<?= date('m/d/Y') ?>">
            <span class="add-on"><i class="icon-th"></i></span>
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group" id="parent_email_group" style="display: none;"> 
          <!-- Parent Email --> 
          <!-- <label class="control-label" for="parent_email">Parent Email</label>-->
          <div class="controls guidingText">
            <input type="text" id="parent_email" name="parent_email" placeholder="Parent Email" value="<?=isset($set_values['parent_email'])? $set_values['parent_email'] : ''?>">
            <p>If not available, leave blank for now.</p>
          </div>
        </div>

        <div class="control-group"> 
          <!-- Password --> 
          <!-- <label class="control-label" for="password">Password</label>-->
          <div class="controls guidingText">
            <input type="password" id="password" name="password" placeholder="Password" pattern="^\S{8,}$" required title="Password must be 8 characters or more.">
            <p>Password must be at least 8 characters</p>
          </div>
        </div>
        <div class="control-group"> 
          <!-- Password Confirmation --> 
          <!--<label class="control-label"  for="password_confirm">Confirm Password</label>-->
          <div class="controls">
            <input type="password" id="password_confirm" name="password_confirm" placeholder="Confirm Password" minlength="8" pattern="^\S{8,}$" onchange="check(this)"  required>
            <p class="help-block"></p>
          </div>
        </div>

          <div class="control-group"> 
          <!-- Password Confirmation --> 
          <!--<label class="control-label"  for="password_confirm">Confirm Password</label>-->
          <div class="controls">
            <input type="zip" id="zip" name="zip" placeholder="Zip Code" minlength="5" pattern="^\d{5,}$" onchange="check(this)">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group"> 
          <!-- Submit Button -->
            <button class="button3" id="form-submit-btn">Sign Up</button>
        </div>
      </form>
      <script type="text/javascript">
        $(function(){
            $('#birthday').combodate();
        });
      </script>

但在页面下方，我有上面的 launchChildRegisterModal() 函数，它会引发错误。

【问题讨论】：

显示你是如何引用它的。
在我的中，我包含了 moment.js 和 combodate.js 的脚本标签。在页面的下方，我有一个带有的
如果调用不在函数中，我可以在输入上调用 combodate() ，但在我的页面下方launchChildRegisterModal 函数我收到“不是函数”错误。
我还应该指定 launchChildRegisterModal 函数是通过按钮单击调用的，因此它不会像其他操作那样在页面加载时完成。

标签： javascript jquery scope combodate

【解决方案1】：

它可以在函数中运行。

你是在 domready 上初始化组合函数后调用该函数吗？如果是这样的话，它就行不通了。如果要重新设置值，则必须使用 setValue 方法。

这是一个例子：http://jsfiddle.net/partypete25/nz9vf9a5/

Combodate 在 dom 就绪时初始化，然后再次在按钮单击时调用一个设置新值的函数。

$(function () {
  $('#date').combodate();
});

$("button").click(function () {
  launchChildRegisterModal();
});
var launchChildRegisterModal = function () {
  $('#date').combodate('setValue', "12/12/2003");
};

如果您只希望在单击按钮时使用 dom 中提供的值对其进行初始化，则可以使用相同的结构。

$(function () {
 // $('#date').combodate();
});

$("button").click(function () {
  launchChildRegisterModal();
});
var launchChildRegisterModal = function () {
  $('#date').combodate();
};

【讨论】：

【解决方案2】：

1- 检查您包含的脚本中是否包含了combodate.js，以及您是否在moment.js 之后包含了它，因为combodate 基于moment.js

2 - 确保在您的 html 中输入了以生日为 id 的输入。

【讨论】：