Question

我有一个动态创建的表并分配了一个click事件，但是此事件不适用于所有单元格，仅适用于固定行。我的错误是什么，请帮助我。

这是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
               var cardRules = new Array();
                $.get('UserFile.txt', function(data){
                        cardRules = data.split('\n');
                        // console.log(cardRules.length);
                        for (i = 0; i<cardRules.length; i++) {
                           // console.log(cardRules[i]);
                           var cardParts = cardRules[i].split(",");
                           // console.log(cardParts.length);
                           var out = "<tr>";
                           for (y = 0; y<cardParts.length; y++) {
                              // console.log(cardParts[y].replace("[", "").replace("]", "").replace(/"/g, ''));
                              // out += "<td>" + cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '') + "</td>";
                              out += "<td>Part " + i + " " + y + "</td>";
                           }
                           out += "</tr>";
                           // console.log(out+'\n');
                           $('#tab').append(out);
                        }
                    });

                    $('#tab tr td').eq(2).on('click', function() {
                        console.log("Klick");
                     });
            });      
        </script>
    </head> 
<body> 

<table id="tab" border="1">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>

</body>
</html>

Answer 1

您只是将on事件添加到每行的第3列。

另外，正如@roasted所说，您需要在修改后的元素上使用on事件，在这种情况下，优于document或body仅#tab：

试试这个：

$('#tab ').on('click','tr td', function() {
    if($(this).index() == 2){
        alert("Klick");
    }
});

http://jsfiddle.net/imac/zTAW3/4/

Answer 2

'index'表示元素的从0开始的位置。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
               var cardRules = new Array();
                $.get('UserFile.txt', function(data){
                        cardRules = data.split('\n');
                        // console.log(cardRules.length);
                        for (i = 0; i<cardRules.length; i++) {
                           // console.log(cardRules[i]);
                           var cardParts = cardRules[i].split(",");
                           // console.log(cardParts.length);
                           var out = "<tr>";
                           for (y = 0; y<cardParts.length; y++) {
                              // console.log(cardParts[y].replace("[", "").replace("]", "").replace(/"/g, ''));
                              // out += "<td>" + cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '') + "</td>";
                              out += "<td>Part " + i + " " + y + "</td>";
                           }
                           out += "</tr>";
                           // console.log(out+'\n');
                           $('#tab').append(out);
                        }
                    });

                    $(document).ready(function () {

        $('#tab tr td.cel').on('click', function() {
            console.log("Klick");
             alert($(this).text());
        });
    });      
            });      
        </script>
    </head> 
<body> 

<table id="tab" border="1">
<tr>
<td>col1</td>
<td class="cel">col2</td>
<td>col3</td>
</tr>
    <tr>
<td>col1</td>
<td class="cel">col22</td>
<td>col32</td>
</tr>
    <tr>
<td>col13</td>
<td class="cel">col23</td>
<td>col33</td>
</tr>
</table>

</body>
</html>

我相信这种方式有效 http://jsfiddle.net/pborreli/pJgyu/

Answer 3

您必须使用委托来动态添加元素：

http://jsfiddle.net/UkVSh/

$(document).on('click', '#tab tr td', function () {
    if($(this).index() === 2)
      alert("Klick");
});

如果您在关闭正文标记之前等待DOM就绪或放置脚本代码，则可以使用#tab作为委托。比使用文档更好。

点击td不工作

3 个答案: