檢測是否通過按輸入選擇的輸入值不是的onclick

Question

我有一個輸入標籤

<input type="text" name="cOperator" class="form-control scale-input operator" placeholder="Enter your ID" autocomplete="off" onkeyup="ajax_showOptions(this,'getEmp',event)" required> 

所以，當我開始打字的，它顯示員工列表。我有一個處理點擊事件的jQuery函數。

$(document).on("click",".optionDivSelected, .optionDiv", function() { 
    if($('.operator').val().length > 0){ 
     $('.operator-li').next().addClass('active'); 
     $('.operator-li').find('span').addClass('hidden'); 
     $('.operator-value').show(); 
     $('.operator-value h1 span').html($('.operator').val()); 
     $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
    } 
}); 

函數檢查輸入的值，隱藏的輸入端，示出了在一個div選定值，並自動帶給下一步驟（I沒有下一個按鈕）。 這部分工作完美。 問題是：用戶只能使用標籤進行導航，使用向下或向上箭頭進行選擇並使用Enter鍵進行選擇。我在輸入中有一個選定的值，但它不會將我帶到下一步，因爲Click事件未被觸發。我試圖做下面的事情：

$(document).on("click, keypress",".optionDivSelected, .optionDiv", function() {console.log('someone used keyboard')}); 

但沒有運氣。 （我不知道是否有可能有多個事件處理程序）

如何檢測用戶是否使用Enter鍵插入值並在執行後執行我的工作人員。 當我驗證輸入onchange時，它也創建了一個問題。輸入想輸入的內容不只是通過點擊或輸入按鍵。

請幫我這個。

我無法顯示整個代碼。因爲它有很多後端工作人員混合在一起。 我將包括我嘗試實現的步驟。

我開始打字，我看到一個列表：

我點擊選項之一，我移動到下一個步驟：

但是，當我選擇通過敲擊回車（或迴歸）我只看到選定選項的輸入標籤，沒有選定操作符的div沒有下一步。就像下面：

更新：

下面是我的解決辦法，而不是一個問題：在Aswin拉梅什的評論，alpeshandya和Vikash米什拉的回答組合 我想出了這個代碼，它做我的期望。大多數alpeshandya的回答幫助了我。感謝你們。 而BTW如果你看到，我莫名其妙地spagettiing代碼，請讓我知道。:-)

 var ajaxHandler = function(){ 
    // $(document).on("click",".optionDivSelected, .optionDiv", function() { 
     if($('.operator').val().length > 0){ 
      $('.operator-li').next().addClass('active'); 
      $('.operator-li').find('span').addClass('hidden'); 
      $('.operator-value').show(); 
      $('.operator-value h1 span').html($('.operator').val()); 
      $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
     } 
    // }); 
    console.log('ajaxhandler') 
}; 

$(document).on("click",".optionDivSelected, .optionDiv", ajaxHandler) 
$('.operator').on('keyup', function(event) { 
    if(event.which == 13) { 
      console.log("enter"); 
      event.preventDefault(); 
      ajaxHandler(); 
     } 
}); 

Answer 1

您將需要建立一個可以作爲處理程序點擊一個通用的事件處理函數以及爲重點新聞。這應該爲你的用例的工作：

var eventHandler=function(){ 
 
\t if($('.operator').val().length > 0){ 
 
     $('.operator-li').next().addClass('active'); 
 
     $('.operator-li').find('span').addClass('hidden'); 
 
     $('.operator-value').show(); 
 
     $('.operator-value h1 span').html($('.operator').val()); 
 
     $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
 
    } \t 
 
} 
 

 
$(document).on("click",".optionDivSelected, .optionDiv", eventHandler) 
 
$(document).on("keypress",".optionDivSelected, .optionDiv", function(event){ 
 
\t if(event.which == 13) { 
 
      eventHandler(); 
 
     } 
 
})

這裏是演示plunker： demo