Question

我有以下选择器

    jQuery("table[class='google-visualization-table-table']").on("click", "tr", function(){alert('i am here'); }

我正在使用GOOGLE API

创建表格

以下是我的HTML

<table class="google-visualization-table-table" cellspacing="0">
<tbody>
<tr class="google-visualization-table-tr-head">
<tr class="google-visualization-table-tr-even">
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">MONTEFIORE MEDICAL CENTER</td>
<td class="google-visualization-table-td">208604209.00</td>
<td class="google-visualization-table-td">666813000.00</td>
<td class="google-visualization-table-td">68.72</td>
<td class="google-visualization-table-td">31.28</td>
</tr>
<tr class="google-visualization-table-tr-even">
<tr class="google-visualization-table-tr-odd">
</tbody>
</table>

Answer 1

这些元素似乎是由GOOGLE API动态生成的。所以用文档

绑定它

jQuery(document).on("click", "table.google-visualization-table-table tr", function(){
    alert('i am here'); 
    });

Answer 2

jQuery选择器

CLASS - $(".class")

ID - $("#id")

HTML TAG - $("tag")

你也可以组合选择器，例如$("tag.class")

现在，如果该页面上的元素已经没有，请使用事件委派绑定

$(parent-selector).on(event,target-selector,callback);

在你的情况下：

$(document).on("click", "table.google-visualization-table-table", function(){
    alert('i am here'); 
});

注意：父选择器必须是绑定事件时DOM中存在的父元素，通常人们使用document和body，但是为了表现，你必须拥有最近的父母到目标

Answer 3

当您运行代码时，该代码将提供表格存在（见下文）（并且假设您在实际代码中最后缺少);）。但它很脆弱，我不推荐它。我会使用类选择器，例如

table.google-visualization-table-table

不

table[class='google-visualization-table-table']

因为如果你向表中添加任何其他类，后者将会中断。

所以有两个选择：

在创建表格之后 之前，请不要运行该行代码。

进一步了解您的事件委派，将click挂钩到您要添加表格的任何容器上，如下所示：

jQuery("some container").on("click", "table.google-visualization-table-table tr", function(){alert('i am here'); });

运行时只需确保容器存在即可。作为最后度假胜地，请使用jQuery (document)，但几乎总是有更好的选择。

Answer 4

使用事件委派。根据您使用的jQuery版本，有不同的方法可以执行此操作。假设您的版本相当新，请将点击事件绑定到正文，然后将其委托给table.google-visualization-table-table tr。或者您也可以代替body，将事件处理程序绑定到table.google-visualization-table-table的父元素，该元素存在于dom ready中。

$('body').on("click", "table.google-visualization-table-table tr", function(){
   alert('i am here'); 
  });

Answer 5

试试这个，

jQuery(document).on("click", "table.google-visualization-table-table tr", function(){
   alert('i am here'); 
});

这适用于tr中的所有标记table，无论是已存在还是以后动态添加。

Answer 6

这是你的代码......

jQuery("table[class='google-visualization-table-table']").on("click", "tr", function () { alert('i am here'); }

你错过了结束破坏者“）;”

请查看我的更新代码

$(document).ready(function () {
        jQuery("table[class='google-visualization-table-table']").on("click", "tr", function () { alert('i am here'); });
    });

Answer 7

这应该更适合jquery你使用＃for ids和。对于类和标记名称。

$(".table.google-visualization-table-table > table").on("click", "tr", function(){
   alert('i am here'); 
});

http://www.w3.org/TR/CSS2/selector.html

除了了解css选择器之外＆gt;将选择该类的所有子表元素。

当选择器是一个类时，Jquery事件不会触发

7 个答案: