Question

我有一个表，其中填充了使用ajax的数据库中的用户列表，并且在每个用户名旁边我有一个扩展/最小化图标，我希望用户能够单击以显示更多信息关于那个用户。

实施例： HTML表格

<table class = "table" name="pData" id="<?php echo $patientId ?>">
</table>

填充表格的Javascript :(成功的ajax调用遍历每个用户，并为每个用户添加以下内容）

tableData = "<tr>
             <td>
            <img src = 'expandIcon.png' onclick='showUserInfo("+UserId+", 'Max')'/>       
            </td>";
tableData += "<td colspan = '2'>"+userName+"</td>";
tableData += "<td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp</td>
               </tr>";

$('.table').append(tableData);

我的表格按照我想要的方式创建，但onclick事件从未发生过，并且从未调用过showInserInfo。我如何解决这个问题呢？

Answer 1

在元素中添加一个类，如下所示：

tableData = "<tr>
              <td>
              <img class='anyclass' id="+UserId+" src = 'expandIcon.png'/>
             </td>";
tableData += "<td colspan = '2'>"+userName+"</td>";
tableData += "<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp</td></tr>";
$('.table').append(tableData);

然后像这样编写jquery事件：

$(document).ready(function(){


$(img.anyclass).live('click',function(){

showUserInfo(this.id, 'Max');


});

});

Answer 2

正确关闭img标签

"<tr><td><img src = 'expandIcon.png' onclick='showUserInfo("+UserId+", 'Max')'/></td>";

Answer 3

我检查了你的代码，发现连接有问题：

tableData = "<tr><td><img src = 'expandIcon.png' onclick='showUserInfo(\'"+UserId+"\', \'Max\')'></td>";
tableData += "<td colspan = '2'>"+userName+"</td>";
tableData += "<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp</td> </tr>";
$('.table').append(tableData);

Answer 4

使用＆＃39;事件委托＆＃39;当表元素中有大量行时，效率会更高。

首先创建行：

var newRow = '<tr><td><img src='expandIcon.png' /></td></tr>';

现在将它添加到表的末尾：

$('#yourtable tr:last').after(newRow);

将事件处理程序动态绑定到行（或图像）：

$('#yourtable').on('click', 'tr', function (event) {
    // do your stuff here
});

假设您的表中有100行，如果您遵循常规方法，处理程序将附加到100个元素。使用事件委托，事件处理程序只附加一个元素。

将onclick方法添加到动态创建的表行

4 个答案: