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/ 上尝试相同的操作