javascript - 如何通过 javascript 获取页面加载后添加的表格行？

Question

我的 html 表格中有两个“向上”按钮；上面的一项来自定义，下面的一项是由 javascript 添加的。请参阅下面的代码和 jsfiddle 演示:

表:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td>aaaaa</td> 
        </tr>
        <tr>
            <td><input id='btnUp1' type='button' value='up' class='up'/></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Javascript:

window.onload = function () {
    var tbody = document.getElementById('tbody'),
        n, row, cell;
    for (n = 0; n < 3; n++) {
        row = tbody.insertRow();
        cell = row.insertCell();
        cell.innerHTML = Math.random();
    }
    row = tbody.insertRow(2);
    cell = row.insertCell();
    cell.innerHTML = "<input id='btnUp' type='button' value='up' onclick='NavigateUpDown(this);' />";
    $(".up").click(function () { console.log($(this));});
}

$(".up").click(function () { console.log('outsideload:' + $(this));});

function NavigateUpDown(object) {
         var count = $('table tr').length;    // count gridview rows length   
         var $row = $(this).parents('tr:first'); 
         console.log($row);
}

请参阅下面的 jsfiddle 演示: http://jsfiddle.net/Balkanlii/apdy34xg/6/

测试时请打开浏览器的开发者工具并观察“控制台”选项卡。您将看到，当单击上面的“向上”按钮时，它会通过$(".up").click(function () { console.log($(this));});返回上下文。在 window.onload 。但是，当单击第三行中的另一个“向上”按钮时不会触发它，因为它是在窗口加载后由 javascript 添加的。

我添加了NavigateUpDown(object)自定义函数来接收它，但 $row 的上下文变为“未定义”。

使用另一行，例如:$(".up").click(function () { console.log('outsideload:' + $(this));});没有帮助，因为它也没有被触发。

如何在 javascript 中获取页面加载后由 javascript 添加的行？我们有类似 window.afterload() 的东西吗？任何帮助将不胜感激。

Answer 1

替换以下代码行:

cell.innerHTML = "<input id='btnUp' type='button' value='up' onclick='NavigateUpDown(this);' />";
$(".up").click(function () { console.log($(this));});

用这个:

cell.innerHTML = "<input id='btnUp' type='button' value='up' class='up'/>";
$(document).on('click',".up",function () { console.log($(this));});

$(document).on 将触发任何动态元素上的事件。

在 http://jsfiddle.net/o6f705mu/2/ 上尝试同样的操作