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

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

<强> Live Demo

$(document).ready(function(){

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

});

Answer 3

尝试以下方法：

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

Answer 4

尝试：

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

如果你想专门为#NameLabel，然后将开启选择器更改为“#NameLabel”

Answer 5

<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 6

你可以用这个

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

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

如何将单击事件绑定到表头内的Div

6 个答案: