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);
                        }
                    });

                    $('#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>
4

3 回答 3

1

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

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

尝试这个：

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

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

于 2013-05-29T15:19:59.597 回答
1

指示元素从 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/

于 2013-05-29T15:36:09.733 回答
0

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

http://jsfiddle.net/UkVSh/

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

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

于 2013-05-29T15:10:02.380 回答