Question

每当用户点击td内的任何tbody元素时，我都会尝试提出点击事件。这是我到目前为止所做的，但它没有提出事件，任何想法为什么？

<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#skuOptionsBody td").click(function () {
            alert('clicked!');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="options" border="1">
        <thead>
            <tr>
                <td>
                    SWEET OPTION
                </td>
                <td>
                    DRINK OPTION
                </td>
            </tr>
        </thead>
        <tbody id="skuOptionsBody">
            <tr>
                <td style="text-align: center">
                    SO1
                </td>
                <td style="text-align: center">
                    DO1
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</body>

更新

抱歉，我忘了提到我使用jQuery动态地向表添加行，因为我正在添加新行，我需要将它们绑定到此click事件。如何完成？

Answer 1

在$（document）.ready（function（）{}）;

中尝试

$("#skuOptionsBody td").bind('click', function () {
    alert('clicked!');
});

OR for jquery＆gt; 1.7你可以使用.on（）

$("#skuOptionsBody").on('click', 'td', function () {
    alert('clicked!');
});

Answer 2

您的代码必须位于dom ready handler，因为您试图在dom中加载目标元素之前添加事件处理程序

jQuery(function(){
        $("#skuOptionsBody td").click(function () {
            alert('clicked!');
        });
})

Answer 3

绑定脚本在添加到dom的元素之前执行，如果可能，也使用latest jQuery。

您可以将脚本放入document.ready

 $(document).ready(function(){
       $("#skuOptionsBody td").click(function () {
          alert('clicked!');
       });
 });

使用on

上的委托事件

   $(document).on("click","#skuOptionsBody td", function () {
      alert('clicked!');
   });

将html元素添加到DOM后放入脚本，可以在结束body标签之前。

  <body>
    <form id="form1" runat="server">
        <table id="options" border="1">
            <thead>
                <tr>
                    <td>
                        SWEET OPTION
                    </td>
                    <td>
                        DRINK OPTION
                    </td>
                </tr>
            </thead>
            <tbody id="skuOptionsBody">
                <tr>
                    <td style="text-align: center">
                        SO1
                    </td>
                    <td style="text-align: center">
                        DO1
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <script type="text/javascript">
        $("#skuOptionsBody td").click(function () {
        alert('clicked!');
        });
    </script>
</body>

Answer 4

在document-ready handler中变形您的代码，因为当代码运行时，它将无法在页面中找到“skuOptionsBody td”元素：浏览器尚未对其进行解析。

代码的

$(document).ready(function () {
    $("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });
});

或

将<script>标记移至<body>的末尾。

或

使用事件委派

代码的

$(document).delegate('click', "#skuOptionsBody td", function () { alert('clicked!'); });

Answer 5

您的代码没有任何问题。只是你没有在正确的地方添加它。在准备好的文件上写下代码：

$(document).ready(function(){
$("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });
});

Answer 6

我在jsfiddle中尝试了你的代码，一切似乎都运行正常，只需把它放到一些顶级事件，比如$（document）.ready（）函数。这是一个链接http://jsfiddle.net/lithium182/A5vMj/

jquery：

$("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });

您想触发点击thead单元格吗？

在tbody中的每个td上提升jQuery click事件

6 个答案: