How to get the a href clickable and get his own ID in jQuery?

Question

HTML:

<table class="datagrid-btable">
   <tbody>
     <tr id="datagrid-row-0">
        <td field="username"></td>
        <td field="firstname"></td>
        <td field="lastname"></td>
        <td field="actions">
            <div>
               <a href="javascript:void(0)" class="editrow" id="1"><span>EDIT</span></a>
               <a href="javascript:void(0)" class="deleterow" id="1"><span>DELETE</span></a>
            </div>
        </td>
     </tr>
     <tr id="datagrid-row-1">
        <td field="username"></td>
        <td field="firstname"></td>
        <td field="lastname"></td>
        <td field="actions">
            <div>
               <a href="javascript:void(0)" class="editrow" id="2"><span>EDIT</span></a>
               <a href="javascript:void(0)" class="editrow" id="2"><span>DELETE</span></a>
            </div>
        </td>
     </tr>
   </tbody>       
</table>

jQuery:

$('.editrow').on('click', function() {
   console.log($(this).attr('id'));
});

Question:

I don't know much of jquery. But I tried I also tried this code: $('.editrow').closest('td') still nothing. Maybe someone who's pro in this can help me.

I will edit the question again. Sorry. But my question is that i want to get the id of the a href of edits. — aldrin27, Feb 02 '16 at 01:44
your `console.log` is missing a close parenthesis. Otherwise what you've got should work. — Richard Theobald, Feb 02 '16 at 01:45
You got it right. Just include closing braces for `console.log`statement. — pratikpawar, Feb 02 '16 at 01:46
@aldrin27 That's not a question, that's what you want to do. How about you explain what you expect to see and what you're actually seeing — Phil, Feb 02 '16 at 01:46
@Phil there's no error but the a href is not triggering the console. — aldrin27, Feb 02 '16 at 01:48
My guess is the script is in the page `` (or otherwise in the document before the ``) and not wrapped in a *ready* handler. See the duplicate question above. — Phil, Feb 02 '16 at 01:50
@Phil the js is at the bottom of my head above the end of body. — aldrin27, Feb 02 '16 at 01:53
@aldrin27 I'm not sure what that means. `` comes **before** ``. Did you have a look at the duplicate question and answers? — Phil, Feb 02 '16 at 01:57
@aldrin27 Refer to my answer. You need correction of `id` and event associated with class name `editrow` and `deleterow` I have replaced `console` logging with alert for easy testing. You can handle it anyway you need. — pratikpawar, Feb 02 '16 at 01:57
@aldrin27 you also have duplicate IDs which is a big no-no although that shouldn't stop your code working. — Phil, Feb 02 '16 at 01:58
@pratikwebdev maybe this is because of my plugin. I use the plugin of jeasyui. Maybe the DOM is not yet ready but it is wrap in the _ready_ function. — aldrin27, Feb 02 '16 at 02:01

score 0 · Answer 1 · answered Feb 02 '16 at 01:46

0

  console.log($(this).attr('id');

to:

 console.log($(this).attr('id'));

answered Feb 02 '16 at 01:46

huan feng

7,307
2
32
56

score 0 · Answer 2 · answered Feb 02 '16 at 02:02

If you put your script at the end of <head>, you should wrap it like this,

$(function(){ 
    $('.editrow').on('click',function(){
    alert($(this).attr('id'));
    });
});

If you don't wrap it with ready function, the script will try to bind the event handlers before the DOM exists.

Otherwise, put your script at the end of the <body>

<script type="text/javascript">
  $('.editrow').on('click',function(){
    alert($(this).attr('id'));
  });
</script>

How to get the a href clickable and get his own ID in jQuery?

2 Answers2