jQueryのTimepicker外部トリガ

Question

私はいくつかのトラブルになっ示すから私のjQuery Timepickerをトリガーするために外部要素を抱えています...

Timepicker：私もこの1を発見したが、 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 doesntの変更）

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

..

私はこのエラーを保つ：例外TypeError ：n [t]は定義されていません

それが何を意味するのか、それをトラブルシューティングする方法を手がかりにしてください。

フィドルは私の実際の例を動作します..しかしない： https://jsfiddle.net/k0r0rd4a/

開始時間1が現在動作するようにONLY timepickerセットアップ...（これだけ1つのフィールドに焦点を当てる）

ある提案

** jsfiddleが正しく動作するように見えますが、私のすべてのプロジェクト/フォームに一度追加したものが間違っているようです。 （奇数のエラーがスローされます。例外TypeError：N [t]は未定義です）

Answer 1

あなたが.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'); 
}); 

は、概念実証例です。

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

また、そのtimepickerはメソッドにアクセスしようとする前に、要素のために初期化されていることを確認しますあなたのコードに基づいて

$(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>