Question

我在获取外部元素以触发我的jQuery Timepicker显示时遇到了一些麻烦......

虽然我也找到了这个吗？（如果更好或推荐） http://jonthornton.github.io/jquery-timepicker/

标记式：

<label for="startTime1">* Proposed Start Time:</label>  
<div class="input-group">
    <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
    <span class="input-group-addon">
        <i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>

    </span>
</div>

如果我注释掉这一行..并且只留下警报（）..没有抛出错误？

他们的例子：

$('#spanExample').timepicker();
$('#openSpanExample').on('click', function(){
    $('#spanExample').timepicker('show');
});

我的尝试:(提醒工作..时间选择器没有改变）

$('#startTime1Trigger').on('click', function(){
    $('.timepicker').timepicker('show');
    //$('#startTime1').timepicker('show'); //didnt work either
    //alert('triggered');
});

在开发者工具中..

我保留此错误：TypeError：n [t]未定义

但我不知道这意味着什么......或者如何解决它。

小提琴起作用..但不是我现实世界的例子： https://jsfiddle.net/k0r0rd4a/

建议的开始时间1是当前正常工作的唯一时间戳设置..（因此只关注那一个字段）

**一旦添加到我的整体项目/表单中，似乎出现了问题......因为jsfiddle似乎正常工作..但是当添加到我的表单中时。（抛出奇怪的错误：TypeError：n [t]未定义）

Answer 1

您可能有多个.timepicker实例：您需要依赖接收点击事件的元素的上下文，即：

$('#startTime1Trigger').on('click', function(){
    // Look for timepicker instance that is the parent's sibling
    $(this).parent().siblings('.timepicker').first().timepicker('show');
});

此外，在尝试访问方法之前，请确保已为元素初始化timepicker：

$('#startTime1Trigger').on('click', function(){
    // Look for timepicker instance that is the parent's sibling
    var $tp= $(this).parent().siblings('.timepicker').first();

    // Check if the method is defined before firing it
    if ($tp.timepicker())
        $tp.timepicker('show');
});

这是一个概念验证示例：

$(function() {
  $('#startTime1Trigger').on('click', function(){
    var $t = $(this),
        $tp = $(this).parent().siblings('.timepicker').first();
        
    if ($tp.timepicker())
      $('#startTime1').timepicker('show');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<label for="startTime1">* Proposed Start Time:</label>
<div class="input-group">
  <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
  <span class="input-group-addon">
        <i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>
    </span>
</div>

jQuery Timepicker外部触发器

1 个答案: