java - 我在数据表中的 javascript 工作得不好

Question

在我的应用程序中，我使用 datetable 来表示动态表，并且我在 javascript 中开发了一些函数，以在用户用鼠标连续单击时捕获行的日期。 它在第一页中表现良好，但在下一页中表现不佳，如果我在某行中单击，事件将不起作用。 当我还插入标题列进行排序时，第一行不起作用。 一个例子:

接下来是代码:

<script type="text/javascript">
$(document).ready(function(){
   $(".rowClick").click(function(){
     alert($(this).text());
   });
   $(".rowClick").mouseenter(function(){
     $(this).css("background-color", "#CCC");
   });
   $(".rowClick").mouseleave(function(){
     $(this).css("background-color", "#f6f6f6");
   });
});
</script>
...
    <table id="tablePrueba">
            <thead>
                <tr>
                    <th><fmt:message key="common.mac"/></th>
                    <th><fmt:message key="common.model"/></th>
                    <th><fmt:message key="common.maker"/></th>
                    <th><fmt:message key="common.serialNumber"/></th>
                    <th><fmt:message key="common.vendor"/></th>
                    <th><fmt:message key="common.purchase"/></th>
                    <th><fmt:message key="common.warranty"/></th>
                    <th><fmt:message key="common.manufacturer"/></th>
                </tr>
            </thead>
            <tbody>
                <tr class="rowClick">
                    <td>1234:5678</td>
                    <td>model1</td>
                    <td>maker1</td>
                    <td>0123456789</td>
                    <td>vendor1</td>
                    <td>26/11/2013</td>
                    <td>26/11/2015</td>
                    <td>manufacturer1</td>
                </tr>
                <tr class="rowClick">
                    <td>8765:4321</td>
                    <td>model2</td>
                    <td>maker2</td>
                    <td>9876543210</td>
                    <td>vendor2</td>
                    <td>01/01/2013</td>
                    <td>01/01/2015</td>
                    <td>manufacturer2</td>
                </tr>
                <tr class="rowClick">
                    <td>0000:1111</td>
                    <td>model3</td>
                    <td>maker3</td>
                    <td>1234567890</td>
                    <td>vendor3</td>
                    <td>01/01/2010</td>
                    <td>01/01/2012</td>
                    <td>manufacturer3</td>
                </tr>
            </tbody>
    </table>

它的下一页也会制作什么？

Answer 1

尝试:

$(文档).on(事件、选择器、处理程序)。

如

$(document).on("click", ".rowClick", function(){alert($(this).text());});

这将确保点击事件处理程序也应用于将来创建的所有 .rowClick 行。