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

【问题标题】：How to use jquery.html to insert html code inside a div如何使用 jquery.html 在 div 中插入 html 代码
【发布时间】：2012-01-02 05:54:54
【问题描述】：

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

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

我在该 DIV() 中插入的建议列表。我通过 ajax 和使用 jquery.HTML() 获得该建议列表，我将在该 DIV() 中插入这些列表。

我在 DIV() 中插入的建议列表 HTML 代码是这样的......

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

现在，发生的事情是.. 我成功地能够在该 DIV() 中构建建议列表。但是，我被卡住的地方是......当有人点击任何特定的建议列表（名称）时，需要触发一个 javascript 事件并且名称需要出现在给定的输入框中。

对于 java 脚本事件触发，我使用的是 JQuery.HTML() & 代码是这样的..

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

但是，我的问题是.. 我可以成功显示列表，但是当我单击建议列表中的任何特定名称时，java-script 事件没有触发并且我无法捕捉到该名称。

我不是 java 脚本专家。所以，不知道到底哪里出了问题。需要一些帮助。

问候

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

如果您希望事件处理程序对动态添加到 dom 的 html 有效，那么如果您正在寻找 jQuery live 函数。

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

【讨论】：

@mi6 - 很酷。当我找到一个正是我正在寻找的 Stack Overflow 问题时，我总是很喜欢。

【解决方案2】：

寻找 jquery ui 自动完成插件，它会让你的生活更轻松......也可以通过点击事件实时使用

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

或delegate

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

【讨论】：

【解决方案3】：

试试：

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

【讨论】：

【解决方案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);
});

【讨论】：