简体   繁体   English

为什么当鼠标单击表格行时我无法获取行 ID?

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

I have a index.html page with a table:我有一个带有表格的index.html页面:

<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 :我已将my.js包含在我的页面中,我尝试在my.js中通过以下方式获取鼠标单击行的id

$('.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?但是我没有得到点击行的行ID(没有警报),我错在哪里?

---Solution--- - -解决方案 - -

My bad, I have one place emptied the table, which means no tr at all.我的错,我有一个地方清空了桌子,这意味着根本没有 tr。 that's why it does not work.这就是为什么它不起作用。 Sorry for bothering.抱歉打扰了。

  1. $ === jQuery ? $ === jQuery
  2. Is the code which binds the click listener executed in a document ready handler ?绑定单击侦听器的代码是否在文档就绪处理程序中执行?
  3. this.id is sufficient and will work in all browsers. this.id就足够了,可以在所有浏览器中使用。

This seems to work just fine... Here's a working JSFiddle that uses alert instead of console.log:这似乎工作得很好......这是一个使用警报而不是console.log的工作JSFiddle:

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

Based on the comments and Matt's answer, you should wrap your function like this:根据评论和马特的回答,您应该像这样包装您的 function:

$(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. javascript 在 DOM 准备好之前执行,因此未应用处理程序。

It's working for me .它对我有用

What do you get if not the id?如果没有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.最常见的问题是事件处理程序没有绑定到元素,最常见的解决方案是将其包装在$(document).ready(){... }中,以便等待 DOM 加载在绑定到元素之前。

(There's also the relatively recent .live() function which binds to elements as they get added in the life of the document .) (还有相对较新的.live() function绑定到元素,因为它们被添加到文档的生命周期中。)

first you must check your js file path that it is correct or not?首先你必须检查你的js文件路径是否正确? if this is correct then i think there is no any error in your script.. i also tested it... you can check it Demo如果这是正确的,那么我认为您的脚本中没有任何错误..我也对其进行了测试...您可以检查它Demo

Change your event handler to将您的事件处理程序更改为

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM