從html選擇新創建的combox的jQuery事件選擇

Question

我需要一些有關自定義jquery事件的任何ideea的指導/建議。 從html選擇我試圖創建一個「組合框」，用戶可以在其中鍵入文本，選項列表將被該輸入文本過濾。 一個選擇的方式，HTML代碼一樣

<select name="foo_select" id="foo_id"> 
    <option value="foo_option_value_1">foo_option_text_1</option> 
    <option value="foo_option_value_2">foo_option_text_2</option> 
    <option value="foo_option_value_3">foo_option_text_3</option> 
</select> 

將與

<div class="combo_container" id="foo_select_container" style="position:relative"> 
    <input type="text" class="combo_text" /> 
    <input type="hidden" name="foo_select" id="foo_id" /> 
    <div class="combo_arrow"> 
    <ul style="position:absolute;"> 
     <li id="foo_option_value_1">foo_option_text_1</li> 
     <li id="foo_option_value_2">foo_option_text_2</li> 
     <li id="foo_option_value_3">foo_option_text_3</li> 
    </ul> 
</div> 

所以被替換，當用戶選擇的與類輸入一定的「選項」從新創造的「組合框」「 combo_text「選項的文本被插入，並在隱藏的輸入選項的ID中插入。

現在，我需要做的就是知道用戶何時選擇一個選項。基本上我需要做的是創建相當於jQuery（'#foo_id'）.change（function（）{do_someting}）;爲我新創建的組合框，但我沒有ideea從哪裏開始。

如果有人有任何ideea我會apreciate。

---

更新。

我提到我儘量保持html選擇的行爲。該組合框的功能，如：對向上/向下箭頭上集中combo.text用戶可以選擇一個值，並在輸入值被改變，調用函數選擇（）或逃避什麼chages - 即使用戶使用上/下箭頭選擇了其他值。

所以我想我需要做的是這樣..當隱藏輸入$（「#foo_id」）改變做些事情，所以我需要找出當此輸入的值發生變化。

---

謝謝..

Answer 1

所以我設法找到一個解決方案，我張貼，也許會幫助別人，而且是這樣的：

在隱藏輸入我連着叫cmbchange

jQuery('#foo_id').bind('cmbchange', function(){ 
    __do_something__ 
}) 

而且在功能上新的事件選擇（）我已觸發該事件

jQuery('#foo_id').trigger('cmbchange'); 

很簡單，如果你考慮一下。很棒的事情，jQuery。 無論如何感謝您的幫助。

Answer 2

也許這樣的事情是你在找什麼？

// Should also work on elements that will 
// be created later 
$('#foo_select_container li') // Select all <li>s from the container 
    .on('click', function (ev) { // 
     // `this` will be bound to the clicked <li> element 
     var myId = $(this).attr('id'); 
     // More code here ... 
    }); 

Answer 3

爲了便於操作，請確保所有關鍵元素都有一個類。如果你想要多個實例，ID會使事情變得更加複雜，因爲ID必須是唯一的，但是如果你需要它來管理形式邏輯，比如驗證或者其他什麼，我們會保持這個id在一個輸入上

當你創建一個僞選擇（我假定它正在與腳本創建）將會把所有的代碼combo_container類中的「發現」，因此它保持絕緣從其他實例

HTML

<div class="combo_container" id="foo_select_container" style="position:relative"> 
    <input type="text" class="combo_text" /> 
    <input type="hidden" name="foo_select" id="foo_id" class="combo_id"/> 
    <div class="combo_arrow"> 
    <ul style="position:absolute;" class="combo_list""> 
     <li id="foo_option_value_1">foo_option_text_1</li> 
     <li id="foo_option_value_2">foo_option_text_2</li> 
     <li id="foo_option_value_3">foo_option_text_3</li> 
    </ul> 
</div> 

JS：

var $cont=$('.combo_container') 
$cont.find('.combo_list li').click(function(){ 
     $cont.find('.combo_id').val(this.id); 
     $cont.find('.combo_text').val($(this).text()); 
})