How can I get the row of a table added after pageload by javascript?

Question

There are two "up" buttons in my html table; above one is from the definition and the bottom one is added by javascript. Please see the codes and jsfiddle demo below:

Table:

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

Please see the jsfiddle below for demo: http://jsfiddle.net/Balkanlii/apdy34xg/6/

Please open the developer tools of the browser and observe the "console" tab while testing. You will see that when above "up" button is clicked, it returns a context via $(".up").click(function () { console.log($(this));}); in the window.onload. However, It is not triggered when the other "up" button in third row is clicked since it is added by javascript after the window load.

I added NavigateUpDown(object) custom function to receive it, but the context of $row comes "undefined".

Using another line like: $(".up").click(function () { console.log('outsideload:' + $(this));}); did not help as it is not triggered as well.

How can I get the row added by javascript after the page load, in javascript? Do we have something like window.afterload()? Any help would be appreciated.

Answer 1

replace below lines of your code :

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

with this one :

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

The $(document).on will trigger an event on any dynamic element.

try the same on http://jsfiddle.net/o6f705mu/2/

Answer 2

You can do it as follows:

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

Answer 3

If you remove the onclick attribute from the input and directly bind an onclick like this

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

It should work

To add to this, if you then call your navigate function with "this", It should pass the button context and you can then use the passed "this" value.

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