CODEWITHSUNDEEP
jquery
Umair Noor
Umair Noor

Reputation: 442

JQuery: didnt get button id on click

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/

Upvotes: 0

Views: 646

Answers (3)

scessor
scessor

Reputation: 16115

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

Upvotes: 1

Thach Mai
Thach Mai

Reputation: 945

Next time, please make a jsfiddle. It makes things much easier for people to help out.

Your problem is that you bind the click events inside a click event, which will cause a cascade of click bindings on every click. Just bind the "click" event on the button.

Here's an example: http://jsfiddle.net/cpMGQ/

Edit: Here's what you would want to do: http://jsfiddle.net/cpMGQ/1/

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

Upvotes: 0

davids
davids

Reputation: 6371

The first time you click on tbody, it attaches a handler to click event for tr. Then, if you click on tr, it attaches a handler to click events for input. The more times you click on them, the more times the hander is attached. So if you just want to print inputs id:

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

EDIT:

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

Upvotes: 0

Related Questions