如何使用jquery.html在div中插入html代码

Question

我正在构建类似FB搜索框建议的脚本。 在哪里，我有一个输入框，用户可以在其中输入名称..，一旦用户输入名称，一些建议就会自动出现在“输入框”下。 所有建议将显示在DIV中。 我正在使用的代码是这样的...

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

我要在该DIV（）中插入的建议列表。我是通过ajax并使用jquery.HTML（）来获得的。

我要在该DIV（）中插入的建议列表HTML代码就是这样。

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

现在，正在发生的事情是..我能够在该DIV（）中成功建立建议列表。 但是，我遇到的困难是..当有人在任何特定建议列表（名称）上单击时，一个javascript事件需要触发并且该名称需要出现在给定的INPUT框中。

对于Java脚本事件触发，我正在使用JQuery.HTML（），并且代码是这样的。

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

但是，我的问题是..我可以成功显示列表，但是当我从建议列表中单击任何特定名称时，java脚本事件未触发，并且我无法捕获该名称。

我不是Java脚本xpert。 因此，不知道哪里到底出了什么问题。 需要一些帮助。

问候

Answer 1

如果您希望事件处理程序对于动态添加到dom中的html生效，那么如果您要查找的是jQuery live函数。

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

Answer 2

寻找jquery ui自动完成插件，它将使您的生活更加轻松...还可以与click事件一起使用

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

或委托

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

祝好运！

编辑：实际上，我在这里犯了一个错误，因为这种想法是完全避免选择。 我的想法是正确的，但是可以通过另一种方式实现：

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.

编辑：该“下拉”的位置：

您如何定位下拉菜单？ 如果您还没有弄清楚，我建议：

$('#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);
});