Question

我正在尝试从简单的MySQL数据库表中检索用户列表，例如，名为TableA，其类似于：Username（varchar），Level（tinyint），DateCreated（datetime）。

在html页面上，我有一个搜索输入框，比如 - 在它下面我有一个div，比如显示结果。我有它，所以当我开始输入一个单词（寻找用户名）时，jQuery make向一个php文件发出ajax请求，该文件向TableA查询用户名。

jQuery部分看起来像：

$("#search_bar").keyup(function()
{
   var user = $(this).val();
   $.post('get_user.php', user_name : user, function(data)
   {
       $("#result_box").html();
   });
}

php脚本get_user.php再次是一个简单的脚本，看起来像

<?php
$user = $_POST['user_name'];
//connect db,
$query = mysqli_query (select Username from TableA where Username like '$user%');

//IMPORTANT PART HERE, I create a <DIV> or can be  <P> and display it back
while ($row = mysqli_fetch_array($query))
{
   echo "<div id="user_info" username='".$row['Username']."'>".$row['Username']."</div>
   //I have the username as an attribute so I can make another .post request and get detailed user info.
}
?>

现在，以前使用jQuery，每个返回的结果都被转储到result_box div（$（“＃result_box”）。html（）;）。我遇到的问题是，如果我有3个用户，比如Mick，Mike和Mila，我开始通过输入'M'进行搜索，查询返回所有三个（这很好），但是，当我点击一个名字时，说返回的最后一个将是Mila，这将触发另一个jQuery函数，该函数现在只是在弹出框中打印所选的名称 - 然而它从出现的第一个div中获取名字Mick的属性在那里，而不是我点击的那个。真奇怪。如果搜索只返回一个条目，那么这很好 - 但是有多个条目，无论我点击哪一个，jQuery只选择第一个。

我怀疑它是因为div都具有相同的ID，并且因为它们是“动态”创建的 - jQuery只是选择属性（例如，$（“＃user_info”）。attr（'username'））是第一个还是只创建了一个？

任何帮助都将不胜感激。

由于

Answer 1

首先，您需要修复具有相同ID的多个DOM对象的问题。也许你可以使用一个类名。但是，这可能无法解决您的点击问题。应使用click事件附带的this引用修复点击问题。这将告诉您确切地点击了哪些项目，因此即使有多个项目，您也可以知道哪个项目被点击并且可以使用以下代码引用该特定对象的属性：

$(this).attr("username");

仅供参考，您或许应该使用数据属性的HTML5约定。因此，您将使用username="xxx"而不是data-username="xxx"的属性。然后，您可以使用：

$(this).data("username");

您可以将所有这些更改与委派事件处理相结合，以获得如下所示的点击处理程序：

您的PHP（切换到类名和数据用户名属性）：

//IMPORTANT PART HERE, I create a <DIV> or can be  <P> and display it back
while ($row = mysqli_fetch_array($query))
{
   echo "<div class="userInfo" data-username='".$row['Username']."'>".$row['Username']."</div>
   //I have the username as an attribute so I can make another .post request and get detailed user info.
}

您委派的事件处理页面中的点击处理程序：

$("#result_box").on("click", ".userInfo", function(e) {
    var username = $(this).data("username");
});

Answer 2

你应该使用jQuery data()
您应该创建div：

<div class="userLink" data-username="$row['username']"></div>

从jQuery中访问它，如

    $('.userLink').on('click',function(e) {
         var username = $(this).data('username');
    }

属性ID必须是UNIQUE。

如何使用jQuery访问动态创建的div的属性

2 个答案: