Question

我怀疑我遇到的问题只是对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（）函数会抛出错误。

Answer 1

它可以在函数内运行。

您是否已经在domready上初始化了combodate功能后调用了该功能？如果是这样的话，那就不行了。如果要重置该值，则必须使用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();
};

Answer 2

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

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

无法从JS功能访问combodate

2 个答案: