0

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

HTML 代码：

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

查询代码：

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 次这样 的赎罪 btn0 btn0 btn0 btn0 btn0 btn0

我在表中附加了多行，并且行中的每个按钮都有一个唯一的 id，如 btn0、btn1、btn2 ......简单我想尝试在点击时获取按钮 id。

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

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

4

3 回答 3

1

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

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

=== 更新 ===

您应该将该行不附加到table，将其附加到tbody该表的：
替换

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

和

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

=== 更新 ===

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

jQuery 1.7（这里是一个 jsfiddle）：

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

在 jQuery 1.7 之前（这里是一个 jsfiddle）：

$('#tblList .gridButton').live('click', function() {
    console.log($(this).attr("id"));
});
于 2012-05-24T06:54:35.263 回答
0

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

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

编辑：

$("#tblList input").live('click', function() {
    console.log($(this).attr("id"));
});
于 2012-05-24T06:57:06.930 回答
0

下次，请做一个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);
于 2012-05-24T07:06:07.583 回答