JQuery：没有得到点击按钮ID

我在jquery点击事件中遇到问题。实际上我在表中追加了一些tr。我的代码如下。JQuery：没有得到点击按钮ID

HTML代码：

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

jQuery代码：

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

但仍不能成功获得按钮ID 100％。在上面的代码中，我有一个问题。如果我点击第一次上按钮，在没有值显示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/

来源

2012-05-24 Umair Noor

如何计算行数 –

你**真正**要结合新每次点击事件？我无法相信这一点。请发布您的HTML代码（不是JS字符串，但要正确缩进）以及您希望单击事件的元素为您提供哪个元素的ID。 – ThiefMaster

你为什么嵌套所有的绑定。当你点击1st时会发生TR绑定，点击tr后会出现输入按钮。毫无疑问，第四次点击后按钮正在工作。 –

只能绑定上的按钮（用类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")); 
});

来源

2012-05-24 06:54:35 scessor

仍然无法正常工作。 :( –

我已经更新了我的答案（再次）。 – scessor

这里[你更新的jsfiddle]（http://jsfiddle.net/y25LW/1/）与我的“之前1.7”版本 – scessor

第一次点击TBODY，它附加一个处理程序，请单击事件TR。然后，如果您点击tr，它会附加一个处理程序来单击要输入的事件。你点击它们的次数越多，挂钩的次数就越多。所以，如果你只想打印输入ID：

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

编辑：

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

来源

2012-05-24 06:57:06 davids

console.log中无值显示 –

下一次，请做的jsfiddle。它让人们更容易帮忙。

你的问题是，你绑定点击事件里面的点击事件，这将导致每次点击的级联点击绑定。只需绑定按钮上的“点击”事件即可。

下面是一个例子：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-24 07:06:07

请在jsfilddle中检查您的自我 [http://jsfiddle.net/umairnoor84/y25LW/](http://jsfiddle.net/umairnoor84/y25LW/） –

JQuery：没有得到点击按钮ID

回答

相关问题