Question

I am facing a problem in the jquery click event.
actually i was append some tr in table. my code is given below.

HTML CODE:

 <table id="tblList">
            <thead>
                <tr><th>Country Name</th>
                    <th>CityName</th></tr>
            </thead>
            <tbody></tbody>
        </table>

JQUERY CODE:

var rowsCount = $("#tblList tbody").find("tr").length;
var table = "<tr><td>" + countryName + "</td><td>" + cityName + "</td></tr><tr><td colspan='2'><div id='divGridRow'><input type='button' value='add Zip Code' id='btn" + rowsCount + "' class='gridButton'/></div></td></tr>";
$('#tblList').append(table);

above code is working fine. now i want to show dialog when click on my addZipCode button.

i was write below code for get the button id.

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

but still not successful to get button id 100%. In the above code i have face one more issue.
if i click first time on button, no value display in console.log, when click third time,then only one time BUTTON ID is display btn0 and when i click fourth time then button id is display three time
btn0
btn0
btn0
and when i click fifth time then button id is display 6 time atones like this
btn0
btn0
btn0
btn0
btn0
btn0

i append multiple rows in table, and every button in row have a unique id like btn0, btn1,btn2…..
simple i want to try to get button id on click.

please help me to find the solution. Thanks in advance.

please check your self in jsfilddle
http://jsfiddle.net/umairnoor84/y25LW/

Answer 1

Only bind the click handler on the buttons (elements with the class gridButton).
Try this:

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

=== UPDATE ===

You should append the row not to the table, append it to the tbody of this table:
Replace

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

with

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

=== UPDATE ===

Because the rows will be added dynamically, you have to change the code to:

jQuery 1.7 (here a jsfiddle):

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

before jQuery 1.7 (here a jsfiddle):

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