JQuery: did not get button id при нажатии

Question

У меня возникла проблема с событием jquery click. Фактически я был добавлен tr в таблице. мой код приведен ниже.

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.

Я написал ниже код для получения идентификатора кнопки.

$("#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, когда нажмите третий раз, то только один раз КНОПКА идентификатор дисплея btn0 и когда я нажмите четвертый раз, то кнопка идентификатор отображения три раза btn0 btn0 btn0 и когда я нажимаю пятый раз, то кнопка идентификатор дисплея 6 раз искупает как этот btn0 btn0 btn0 btn0 btn0 btn0

Я добавляю несколько строк в таблицу, и каждая кнопка в строке имеет уникальный идентификатор, такой как btn0, btn1, btn2 ..... простой. Я хочу попытаться получить идентификатор кнопки при нажатии.

, пожалуйста, помогите мне найти решение. Заранее спасибо.

пожалуйста, проверьте себя в 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, он прикрепляет обработчик для кликов событий для ввода. Чем больше раз вы нажимаете на них, тем больше привязывается к руке. Так что, если вы просто хотите напечатать входы ID:

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

EDIT:

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

Answer 3

В следующий раз, пожалуйста, сделать jsfiddle. Это облегчает людям помощь.

Ваша проблема заключается в том, что вы связываете события click внутри события click, которое вызовет каскад привязок кликов при каждом нажатии. Просто привяжите событие «click» на кнопке.

Вот пример: http://jsfiddle.net/cpMGQ/

Edit: Вот то, что вы хотели бы сделать: 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);