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

Question

我试图从一个简单的MySQL数据库表中检索用户列表，例如名为TableA的，它看起来像这样：Username（varchar），Level（tinyint）， dateCreated会（日期时间）。

在一个html页面上，我有一个搜索输入框，说 - 在它下面我有一个div，说显示结果。我拥有它，所以当我开始输入一个单词（寻找用户名）时，jQuery向一个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那里，而不是我点击的那个。真奇怪。如果搜索只返回一个条目，那么这很好 - 但是，无论我点击哪一个条目，只有第一个条目。我猜它是因为divs都有相同的ID，并且由于它们是'动态'创建的 - 所以jQuery只是拿起属性（例如，$（“＃user_info”）。attr（'username'））是第一个还是唯一一个创建的？

任何帮助，将不胜感激。

谢谢

Answer 1

，您应该使用jQuery data()
您应该创建像格：

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

而且从jQuery的存取权限它像

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

和属性ID必须是唯一的。

Answer 2

首先，您需要解决具有相同ID的多个DOM对象的问题。也许你可以使用类名。但是，这可能不会解决您的点击问题。点击问题应该使用click事件附带的this引用来解决。这将确切地告诉你点击了哪个项目上所以即使有多个项目，就可以知道被点击其中一个，可以与代码特定对象上引用的属性如下：

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

仅供参考，您也许应该使用数据属性的HTML5约定。因此，您可以使用data-username="xxx"而不是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. 
} 

您委派的事件处理click处理程序在页面：

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