Why I can not get the row id when mouse clicked on a table row?

Question

I have a index.html page with a table:

<body>
      <table class="mytable">
          <tr id="1">
              <td>John</td>
              <td>123</td>
          </tr>
           <tr id="2">  
              <td>Kate</td>
              <td>456</td>
          </tr>
      </table>

  <script src="my.js"></script>
  </body>

I have included my.js in my page, I tried to get the id of the mouse clicked row in the following way in my.js:

$('.mytable tr').click(function(e){
                   alert('clicked.'); //even did not get alert here.
                   var rowId = $(this).attr('id');
               alert(rowId);
        });

But I did not get the row id of clicked row(no alert), where am I wrong?

---Solution---

My bad, I have one place emptied the table, which means no tr at all. that's why it does not work. Sorry for bothering.

have you tried alert and see if you're getting that to bubble up? — Joseph, Jun 03 '11 at 15:32
I don't understand... Is this a Firebug problem or jQuery problem? Can you try an "alert(rowId)" to see if it works? — psousa, Jun 03 '11 at 15:34
Then I'd say the problem is something to do with your event handler not bubbling correctly somehow. — Joseph, Jun 03 '11 at 15:36

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

$ === jQuery ?
Is the code which binds the click listener executed in a document ready handler?
this.id is sufficient and will work in all browsers.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 03 '11 at 15:33

Matt Ball

354,903
100
647
710

I have updated my post, I even did not get the alert alert('clicked.'); – Leem Jun 03 '11 at 15:37
Do you see any errors in the console? Is the path to the JS file correct? – Matt Ball Jun 03 '11 at 15:38

score 1 · Answer 2 · answered Jun 03 '11 at 15:35

This seems to work just fine... Here's a working JSFiddle that uses alert instead of console.log:

http://jsfiddle.net/gfosco/KtYkJ/

Based on the comments and Matt's answer, you should wrap your function like this:

$(document).ready(function() {
    $('.mytable tr').click(function(e){
               var rowId = $(this).attr('id');
           alert(rowId);
    });
});

The javascript was executing before the DOM was ready and therefore the handler was not being applied.

Thank you for your opinion, I just found the reason, check my updates — Leem, Jun 03 '11 at 15:44

score 1 · Answer 3 · answered Jun 03 '11 at 15:35

1

It's working for me.

What do you get if not the id?

The most common problem is that the event handler isn't binding to the element, for which the most common solution is to wrap it in $(document).ready(){ ... } so that it waits for the DOM to load before binding to elements.

(There's also the relatively recent .live() function which binds to elements as they get added in the life of the document.)

answered Jun 03 '11 at 15:35

David

208,112
36
198
279

Thank you for your opinion, I just found the reason, check my updates – Leem Jun 03 '11 at 15:44

score 1 · Answer 4 · answered Jun 03 '11 at 15:46

1

first you must check your js file path that it is correct or not? if this is correct then i think there is no any error in your script .. i also tested it ... you can check it Demo

answered Jun 03 '11 at 15:46

chhameed

4,406
4
26
44

score 0 · Answer 5 · answered Jun 03 '11 at 15:37

0

Change your event handler to

$('.mytable tr').each(function() {
    $(this).click(function() {
        var rowId = $(this).attr("id");
        alert(rowId);
    });
});

answered Jun 03 '11 at 15:37

kei

20,157
2
35
62

Thank you for your opinion, I just found the reason, check my updates – Leem Jun 03 '11 at 15:44

Why I can not get the row id when mouse clicked on a table row?

5 Answers5