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

Question

I'm trying to retrieve a list of users from a simple MySQL database table, e.g., called TableA, which looks something like: Username(varchar), Level(tinyint), DateCreated(datetime).

On an html page I have a search input box, say - and underneath it I have a div, say to display the results. I have it so that when I start typing a word (to look for a username), jQuery makes makes an ajax request to a php file which queries the TableA for the usernames.

The jQuery part looks like:

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

The php script, get_user.php, again is a simple script which looks something like

<?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.
}
?>

Now, previously using jQuery, every result that is being returned as a is being dumped in the result_box div ($("#result_box").html();). The problem I have with this is that if I have 3 users, say Mick, Mike and Mila and I start searching by typing 'M', the query returns all three (that's fine), however, when I click on a name, say the last one returned would be Mila, this will trigger another jQuery function which say for now just prints the name of the selected in a popup box - it however picks up the attribute of the first name, Mick, from the the first div that appeared there and not the one I clicked on. It's strange. If the search returns only a single entry then that's fine - however with multiple entries, regardless of which one I click, jQuery picks up only the first one.

I suspect its because the divs all have the same ID, and since they are being 'dynamically' created - jQuery just picks up the attribute (e.g., $("#user_info").attr('username') ) of the very first one or only one created?

Any help would be appreciated.

Thanks

Answer 1

You should use jQuery data()
You should create the div like :

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

And acces it from jQuery like

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

And the attribute ID must be UNIQUE.