Untitled

JQuery: didnt get button id on click
<table id="tblList">
            <thead>
                <tr><th>Country Name</th>
                    <th>CityName</th></tr>
            </thead>
            <tbody></tbody>
        </table>

$("#tblList tbody").bind('click', function() {
    $(this).find("tr").bind('click', function() {
        $(this).find("input").bind('click', function() {
            console.log($(this).attr("id"));
        });
    });
});

$('#tblList .gridButton').click(function() {
    console.log($(this).attr("id"));
});

$('#tblList').append(table);

$('#tblList tbody').append(table);

$('body').on('click', '#tblList .gridButton', function() {
    console.log($(this).attr("id"));
});

$('#tblList .gridButton').live('click', function() {
    console.log($(this).attr("id"));
});

$("#tblList input").bind('click', function() {
    console.log($(this).attr("id"));
});

$("#tblList input").live('click', function() {
    console.log($(this).attr("id"));
});

function addRow(country, city, rowCount) {
    var table = "<tr><td>" + country+ "</td><td>"
        + city + "</td></tr>"
        + "<tr><td colspan='2'><div id='divGridRow'><input type='button' value='add Zip Code' id='btn"
        + rowCount + "' class='gridButton'/></div></td></tr>";

    $('#tblList').append(table);

    $('#btn' + rowCount).click(function () {
        console.log($(this).attr("id"));
    });
}

addRow("country 1", "city 1", 1);
addRow("country 2", "city 2", 2);