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

上面的代码运行正常。现在当点击我的 < strong > addZipCode < / strong > 按钮时, 我想显示对话框。

我写在代码下以获得按钮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 check your self in jsfilddle http://jsfiddle.net/umairnoor84/y25LW/

Answer 1

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

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

* 最新 *

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

$( #tblList ).append(table);

与

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

* 最新 *

因为行将被动态添加, 您必须更改代码为 :

jjury 1. 7 (这里有一个jsfidle :

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

(这里有一个jsfidle ):

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

Answer 2

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

编辑:

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

Answer 3

下次,请做个小提琴,这样人们就更容易帮上忙了

您的问题是您将点击事件绑在 < 坚固 > 的边上 < / 坚固 > 的边上, 使每个点击都产生按键绑定的级联。只要绑紧按钮上的“ 点击” 事件。

这里举个例子:http://jsfiddle.net/cpMGQ/

“强势”Edit: 这里是您想要做的: < a href="http://jsfididle.net/cpMGQ/1/" rel=“no follow” >http://jsfidd.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);

友情链接