Question

我在jquery点击事件中遇到问题。实际上我在表中添加了一些 tr 。我的代码如下。

HTML代码：

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

上面的代码工作正常。现在我想在点击 addZipCode 按钮时显示对话框。

我写下了代码来获取按钮ID。

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

但仍未成功获得100％的按钮ID。在上面的代码中，我还面临一个问题。如果我第一次点击按钮， console.log 中没有显示任何值，当第三次点击时，只显示一次BUTTON ID btn0 ，当我第四次点击时然后按钮ID显示三次的 btn0 btn0 btn0 当我第五次点击时，按钮ID显示6次这样的atones 的 btn0 btn0 btn0 btn0 btn0 btn0

我在表中追加多行，行中的每个按钮都有一个唯一的ID，如btn0，btn1，btn2 ...... 很简单，我想尝试点击按钮ID。

请帮我找到解决方案。提前谢谢。

请在jsfilddle中检查自己 http://jsfiddle.net/umairnoor84/y25LW/

Answer 1

仅绑定按钮上的单击处理程序（具有类gridButton的元素）试试这个：

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

=== UPDATE ===

您应该将该行不附加到table，并将其附加到此表的tbody：
取代

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

带

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

=== UPDATE ===

由于行将动态添加，因此您必须将代码更改为：

jQuery 1.7（here a jsfiddle）：

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

之前的jQuery 1.7（here a jsfiddle）：

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

Answer 2

第一次单击tbody时，它会附加一个处理程序来单击tr的事件。然后，如果单击tr，它会附加处理程序以单击事件以进行输入。点击它们的次数越多，连接的次数就越多。所以如果你只想打印输入id：

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

编辑：

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

Answer 3

下次，请制作一个jsfiddle。它使人们更容易提供帮助。

您的问题是您将点击事件绑定在点击事件中，这会在每次点击时产生一连串的点击绑定。只需绑定按钮上的“click”事件即可。

以下是一个示例：http://jsfiddle.net/cpMGQ/

修改：这是您想要做的事：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);

JQuery：点击后没有获得按钮ID

3 个答案: