Как я могу получить строку таблицы, добавленной после загрузки страницы с помощью 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 имеет значение «undefined».

Использование другой строки, например: $(".up").click(function () { console.log('outsideload:' + $(this));});, не помогло, так как не вызывается.

Как я могу получить строку, добавленную javascript после загрузки страницы, в javascript? Есть ли у нас что-то вроде window.afterload ()? Любая помощь будет оценена.

Answer 1

Если вы удалите атрибут onclick из входных данных и напрямую свяжете onclick следующим образом:

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

Это должно работать

Чтобы добавить к этому, если вы затем вызываете функцию навигации с помощью«this», оно должно передавать контекст кнопки, и затем вы можете использовать переданное значение «this».

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' />";
$(".up").click(function () { console.log($(this));});
$("#btnUp").click(function () { NavigateUpDown(this) });
}

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

Answer 2

замените следующие строки вашего кода:

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/

Answer 3

Вы можете сделать это следующим образом:

 $( document ).ready(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'  />";

    $(".up").click(function () { console.log($(this));});

        var button = document.getElementById("btnUp");
        button.addEventListener("click", function(event){
            var count = $('table tr').length;    // count gridview rows length   
            row = $(this).parents('tr:first'); 
            console.log(row);
        });
  });