jQuery的Timepicker外部觸發

Question

我有一些麻煩，從顯示觸發我的jQuery Timepicker外部元素...

Timepicker： http://timepicker.co/

雖然我發現這一個呢？ （如果它能夠更好或推薦） 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'); 
}); 

我嘗試：（警報工程.. timepicker並沒有改變）

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

在開發工具..

我把這個錯誤：類型錯誤：n [t]未定義

但我沒有線索是什麼意思..或如何排除故障。

小提琴作品..但不是我的真實的例子： https://jsfiddle.net/k0r0rd4a/

建議開始時間1是唯一timepicker建立目前的工作。（因此只專注於一個領域）

**似乎有什麼事情一旦添加到我的整個項目/形式出錯了，因爲jsfiddle似乎可以正常工作..但添加到我的表單時。 （拋出奇錯誤：類型錯誤：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>