jQuery使用PHP循环填充表的行

Question

was hoping to have someone with jQuery expertise help me out here...

I have a table that is created dynamically through php using such code:

...
  <tbody>
<?php
foreach ($members as $member){
  echo '<tr>';
    echo "<td><a href='#' class='edituser-information' title='edituser_information' data-id=" .$member['id']. "><img src='/images/edit-button.png' width='59' height='28' alt='EDIT'></a>";
  echo '</tr>';
}?>
  </tbody>
...

I am passing information into a jQuery function and then ajax using this:

$('#editUsersTable tbody').on('click', 'tr', function (){           
  data_id = $('td a.edituser-information', this).eq(0).attr('data-id');
  $.ajax({
   url: 'edit_specific_user.php',
   type: 'POST',
   data: {id : data_id},
   ...

THE PROBLEM:

The ajax script picks up data-id correctly because it loads the information right through the row that was clicked on... Unfortunately, what I want is the user is FORCED to click the edit button, and not just the row in the table...

As of now, the user can just click the row, and then it proceeds right into the jQuery because the entire row is the trigger.

How can I change it that the user must click the specific row's edit button, and not the row itself?

Thank you in advance!!

Answer 1

try

$('#editUsersTable tbody tr td').on('click', 'a.edituser-information', function (){           
    data_id = $(this).eq(0).attr('data-id');
    $.ajax({
    url: 'edit_specific_user.php',
    type: 'POST',
    data: {id : data_id},
    ...

Answer 2

You need to change the propogation selector in the very first line:

$('#editUsersTable tbody').on('click', 'tr', function (){  

changes to

$('#editUsersTable tbody').on('click', 'tr a', function (){  

Refer to the "Direct and Delegated events" section in the jQuery documentation for "on"

http://api.jquery.com/on/