javascript - 如何将单击事件绑定到表头中的 Div

Question

<table class="table lsttabl">
    <thead>
    <tr>
        <th><div id="NameLabel">Customer Name</div></th>
        <th>Email</th>
        <th>Registered</th>
        <th id="Date1Label">Created Date</th>
        <th id="Date2Label">Last Updated Date</th>
        <th id="Date3Label">Expiry Date</th>
        <th id="UserCountLabel">User Count</th>
        <th>Active</th>
        <th>Configure</th>
        <th>Edit</th>
    </tr>
    </thead>

    <tbody> 
    </tbody>
</table> 

我正在尝试使用下面的代码绑定事件

$("#NameLabel").click(function () { alert("hello"); });

我尝试了很多变化，但它不起作用..请分享您的知识。

Answer 1

如果此代码是在页面加载后动态添加的，您可能需要使用委托函数。

$('body').delegate('click','#NameLabel',function(){
  alert("hello");
});

在这里，我使用body选择器，因为我可以确定页面加载时 body 元素就在那里。如果您正在将动态内容加载到另一个父元素中，则可以使用它而不是将事件附加到正文。

Answer 2

<script type="text/javascript">
    $(document).ready(function () {
        $('#NameLabel').click(function () {
            alert("Customer Name Clicked");
        });
    });
</script>
<table class="table lsttabl">
    <thead>
    <tr>
        <th><div id="NameLabel">Customer Name</div></th>
        <th>Email</th>
        <th>Registered</th>
        <th id="Date1Label">Created Date</th>
        <th id="Date2Label">Last Updated Date</th>
        <th id="Date3Label">Expiry Date</th>
        <th id="UserCountLabel">User Count</th>
        <th>Active</th>
        <th>Configure</th>
        <th>Edit</th>
    </tr>
    </thead>

    <tbody> 
    </tbody>
</table> 

不要忘记导入 JQuery 库。

Answer 3

您需要在document.ready中绑定它，以确保该元素在脚本访问之前可用。

现场演示

$(document).ready(function(){

   $("#NameLabel").click(function () {
          alert("hello");
   });

});

Answer 4

尝试以下操作：

$(document).ready(function(){
    $('table.lsttabl thead th div[id$=NameLabel]').click(function(){
    alert("hii");
    });
});

Answer 5

尝试：

$(document).ready(function(){
    $('table').on('click', 'th', function(){
        console.log(event.target);
    });
});

如果你想要它专门用于#NameLabel，然后将 on 选择器更改为 '#NameLabel'

Answer 6

你可以用这个

这是一个有效的 jsfiddle http://jsfiddle.net/9PNk6/

$("#NameLabel").on('click',function () {
   alert("hello");
});