Javascript 在tbody中的每个td上引发jQuery单击事件_Javascript_Jquery_Html_Jquery Click Event

Javascript 在tbody中的每个td上引发jQuery单击事件

javascript jquery html

Javascript 在tbody中的每个td上引发jQuery单击事件,javascript,jquery,html,jquery-click-event,Javascript,Jquery,Html,Jquery Click Event,我试图在用户点击tbody中的任何td元素时引发一个点击事件。这是我目前为止所做的，但它没有引发事件，你知道为什么吗 <head runat="server"> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $("#skuOptionsBody td").cl

我试图在用户点击tbody中的任何td元素时引发一个点击事件。这是我目前为止所做的，但它没有引发事件，你知道为什么吗

<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动态地将行添加到表中，并且在添加新行时，我需要将它们绑定到此单击事件。如何才能做到这一点？

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

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

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

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

绑定脚本在元素添加到dom之前执行，如果可能，还可以使用

您可以将脚本放入document.ready中

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

在上使用委托事件

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

将脚本放在添加到DOM中的html元素之后，可能正好在结束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>

绑定脚本在元素添加到dom之前执行，如果可能，还可以使用

您可以将脚本放入document.ready中

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

在上使用委托事件

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

将脚本放在添加到DOM中的html元素之后，可能正好在结束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>

扭曲您的代码，因为当代码运行时，它在页面中找不到skuOptionsBody td元素：浏览器将尚未解析该元素

代码

或

将标记移动到列表的末尾

或

使用事件委派

代码

扭曲您的代码，因为当代码运行时，它在页面中找不到skuOptionsBody td元素：浏览器将尚未解析该元素

代码

或

将标记移动到列表的末尾

或

使用事件委派

代码

您的代码中没有任何错误。只是您没有将其添加到正确的位置。在文档准备就绪时编写代码：

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

您的代码中没有任何错误。只是您没有将其添加到正确的位置。在文档准备就绪时编写代码：

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

在$document.readyfunction{}内尝试此操作

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

或者对于jquery>1.7，您可以使用.on

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

在$document.readyfunction{}内尝试此操作

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

或者对于jquery>1.7，您可以使用.on

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

我在JSFIDLE中尝试了您的代码，一切似乎都很正常，只需将其放到一些顶级事件中，比如$document.ready函数。这里有一个链接

jquery：

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

你想触发点击一个ad单元格吗？

我在JSFIDLE中尝试了你的代码，看起来一切都很好，只要把它放到一些顶级事件中，比如$document.ready函数。这里有一个链接

jquery：

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

是否要触发对AD单元格的单击？

OP使用的是jquery-1.4.1，正如您所知，它是在添加的版本中添加的：1.7OP使用的是jquery-1.4.1，正如您所知，它是在添加的版本中添加的：1.7您是否在jquery中尝试了live event。动态添加的HTML上的事件本身不起作用。在jquery中使用Live或On事件..您是否尝试在jquery中使用Live事件。动态添加的HTML上的事件本身不起作用。在jquery中使用Live或On事件。。