Question

我有一个输入，当有人输入一个键时，它会生成一个定位的无序列表，并通过数据库找到匹配。

问题是，单击列表项时它不会填充输入字段。它很简单，应该可以工作。

继承人我的HTML：

<p style="position: relative;">
<input id="qbid" value="Enter Customer Name" size="40" />
<div id="qbid_res"></div>
</p>

继承人我的jquery：

$('#qbid_res ul li a').click(function(e) {
    e.preventDefault();
    $('#qbid').val($(this).html()); 
    $('#qbid_res').css('display', 'none'); 
}); 
$('#qbid').keyup(function() {
    $.ajax({
        type: "POST",
        url: "ajax-qbid.php",
        data: { name : $('#qbid').val() },
        dataType: "text",
        success: function(data){
            if (data.length > 0)
            {       
                $('#qbid_res').html(data); 
                $('#qbid_res').css('display', 'block');         
            }
        }
    });
});

继承人我在ajax-qbid.php中的php / mysql：

<ul>

<?php

include 'connect.php';

$sql = mysql_query("select `name` from `customers` where `name` like '%".mysql_real_escape_string($_POST['name'])."%' order by `name` asc");

while ($row = mysql_fetch_assoc($sql))
    echo '<li><a href="#">'.$row['name'].'</a></li>';

?>

</ul>

在我介绍ajax代码之前，它运行正常。我的意思是当我输入一个将在数据库中匹配的值时，它会显示列表，但就像我说点击其中一个名称不会填充输入字段。

Answer 1

您必须使用jQuery live，因为在进行ajax调用之前元素不存在，因此click处理程序不会被附加。

$('#qbid_res ul li a').live('click', function(e) {
    e.preventDefault();
    $('#qbid').val($(this).html()); 
    $('#qbid_res').css('display', 'none'); 
});

ajax填充的列表项在单击时不填充输入

1 个答案: