）（.onを使用して、異なる入力に変化を検出

Question

私は、次のような形式があります：私は必要なもの

<form class="uk-form"> 
    <label for="startDate">Start Date:</label> 
    <input type="text" id="startDate" data-uk-datepicker="{format:'YYYY-MM-DD'}"> 
    <label for="endDate">End Date:</label> 
    <input type="text" id="endDate" data-uk-datepicker="{format:'YYYY-MM-DD'}"> 
</form> 

をそれらdatapickerの一つは、（.on使用して変更されます後はJQueryで）JS関数を呼び出すことです。私はそれが唯一のこのコードで使用して仕事を得る

：

$('#startDate').on('change', function() { 

は、しかし、私は必要なもの、それらの一つは一種のこのような機能を実行するように変更した場合ということです：

$('#startDate'||'#endDate').on('change', function() { 

アイデア？

Answer 1

試してみてください。もちろん$('input').on('change', function() {

ページ上より多くの入力を持っている場合、それはあまりにも彼らのために発生します。だから、おそらく両方のピッカー固有のクラスを与え、そのクラスにハンドブックonを追加します。あなたは

$("form").on('change', "#startDate, #endDate", function(event){...}) 

を持つことができます

Answer 2

またはですから、要素

Answer 3

の交換を心配する必要はいけない入力の両方に名前を付けます。これを試してみてください：

$("input[name='someName']").on('change', function() {}); 

Answer 4

複数の要素に変更イベントを添付するには、multiple selectorを使用できます。もう1つの可能性は、を使用することですclass selector

イベントハンドラの内部で、イベントがトリガされた要素を取得するにはevent.targetを使用できます。

$(function() { 
 
    // Multiple selector: 
 
    // $('#startDate, #endDate').datepicker(); 
 
    // or, class selector: 
 
    $(':text.dpClass').datepicker(); 
 
    
 
    //$('#startDate, #endDate').on('change', function(e) { 
 
    $(':text.dpClass').on('change', function(e) { 
 
    $('#log').text('Changed element is:' + e.target.id); 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<p id="log"></p> 
 
<form class="uk-form"> 
 
    <label for="startDate">Start Date:</label> 
 
    <input type="text" id="startDate" class="dpClass" data-uk-datepicker="{format:'YYYY-MM-DD'}"> 
 
    <label for="endDate">End Date:</label> 
 
    <input type="text" id="endDate" class="dpClass" data-uk-datepicker="{format:'YYYY-MM-DD'}"> 
 
</form>