jquery.htmlを使用してdiv内にhtmlコードを挿入する方法

Question

FB検索ボックスの提案のようなスクリプトを作成中です。ここでは、ユーザーが名前を入力できるINPUTボックスがあります。ユーザーが名前を入力するとすぐに、INPUTボックスの下にいくつかの候補が自動的に表示されます。すべての提案は、DIV内に表示されます。私が使用しているコード...このよう

<input name="Emp_Name" id="emplyoee_search"> 
<div class="list"></div> 

である私は、そのDIVの内側に挿入してる候補リスト（）..私は、Ajax &でjquery.HTML（）は、iを使用していることを取得していますそのDIV（）内にこれらのリストを挿入しています。

私はそのDIVに挿入してる候補リストのHTMLコードは、（）は、このようないくつかの事..です

<div class="listItem" align="left">Sunit K Marwah</div> 
<div class="listItem" align="left">Sunit Maurya</div> 

今、起こっ事がある..私は成功した提案を構築することができますよそのDIV（）内のリスト。しかし、どこに詰まっているのですか..特定の提案リスト（名前）をクリックすると、javascriptイベントが起動する必要があります&与えられたINPUTボックスに名前を表示する必要があります。

私はコードは次のようであるJQuery.HTML（）&を使用していたJavaスクリプトのイベント発射するため

..

$("div.listItem").click(function() { 
var string = $(this).text(); 
alert(string); 
//console.log(string); 
}); 

しかし、私の問題がある..私はできるが正常にリストを示していますが、私がクリックしたとき提案リストの特定の名前については、Javaスクリプトイベントは起動しません&私は名前をキャッチすることができません。

私はJavaスクリプトxpertではありません。だから、どこが間違っているのか分かりません。助けが要る。

よろしく

Answer 1

あなたが探しているものならば、あなたは、動的にDOMに、その後のjQuery live機能を追加し、HTMLのために有効にするためのイベントハンドラをしたい場合。

$("div.listItem").live("click", function() {   
    var string = $(this).text();  
    alert(string);  
    //console.log(string); 
}); 

Answer 2

、それはあなたのための生活が容易になりますプラグインのjQuery UIのオートコンプリートのために見て...また、クリックイベントでライブを使用

$("div.listItem").live("click",function() { ...} 

またはdelegate

$("div.list").delegate(".listItem","click",function(){...}); 

Answer 3

してみてください。

$(".list div").each(function(){ 
     alert($(this).text()); 
     }); 

Answer 4

あなたのajaxレスポンスは：

<select id='empNameAuto' size='1' onClick='sugAccepted($(this.val));' > 
    <option value='value1'>value1</option> 
    <option value='value2'>value2</option> 
    <option value=n>n</option> 
</select> 

function sugAccepted(which) { 
    $('#Emp_Name').val(which); 
} 

the drop down list should be css-ed something like: 

<div .... style='max-height:..px; overflow:scroll'>the select goes here</div> 

That will look like a drop down regular select box. 

幸運です！

EDIT：実際には、私はここで間違いを犯しました。その理由は、選択を完全に避けることだったからです。私の考えは正しかったが、実装は、別の方法で行うことができます。

Your (new) ajax response: 

<span style='display:block;' onClick="sugAccepted('" + response1 + "'); "> 
response1 
</span> 
<span style='display:block;' onClick="sugAccepted('" + response2 + "'); "> 
response2 
</span> 
<span style='display:block;' onClick="sugAccepted('" + response3 + "'); "> 
response3 
</span> 
<span style='display:block;' onClick="sugAccepted('" + response4 + "'); "> 
response4 
</span> 

function sugAccepted(which) { 
    $('#Emp_Name').val(which); 
    get-rid-of-the-suggestion-box 
} 


the drop down list should be css-ed something like: 

<div .... style='max-height:..px; overflow:scroll'>those span go here</div> 

[NOW] That will look like a drop down regular select box. 

EDITを：その場所は、「ドロップダウン」：

をあなたがドロップダウンを配置している方法は？あなたがまだそれを理解していない場合は、私は示唆します：

$('#Emp_Name').keyup(function() { 
    ajax-get-suggestion-list; 
    if ('#suggestionBox').is(':hidden')) { 
     var absH = $('#Emp_Name').offset().top; 
     var absL = $('#Emp_Name').offset().left; 
     append-box-absolutely-at-absH-and-absL 
    } 
    drop ajax-response-into-suggestion-box 
    $('#suggestionBox').html(ajax-response-of-suggestions); 
});