Atribuindo evento click a botões adicionados dinamicamente

Eu estou criando alguns botões dinamicamente e atribuindo-lhes IDs.

Quando alguém clica naquele botão, eu quero coletar o ID e, a partir daí, executar alguma tarefa.

Aqui está meu trabalho em andamento

$(document).ready(function() { $('input:button').addClass("btnClass"); fillData(); $('#btnGet').click(function() { fillData(); }); function fillData() { $.ajax({ type: "Post", url: "../Linq/myService.asmx/getStudent", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { //var nMsg = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d; var t = "" + " " + " " + "  "; $.each(msg.d, function(index, item) { t = t + " "; t = t + "  "; }); t = t + " 
Your Search Result......

Student IDStudent NameStudent CourseStudent USN


" + item.studId + "" + item.studName + "" + item.studCourse + "" + item.studUsn + "

"; $("#stdData").html(t); }, error: function(msg) { } }); } function onButtonClick() { var btnId = $(this).val(); alert(btnId); }

Basta adicionar um nome de class de new-button aos botões que você está criando e adicionar um manipulador de clique depois.

Então substitua este código

  

ao invés de

 var btnId = $(this).val(); 

isso lhe dará o atributo id do botão clicado e não o valor do elemento do formulário.

Eu espero que isso te ajude

Jerome Wagner

Se você estiver adicionando botões dinamicamente, pense em usar “.live ()”. Sempre que o evento especificado acontece, ele segue os elementos html até a tree até que seja manipulado. Isso é mais eficiente se você tiver muitos elementos também porque o evento não está atribuído ao próprio elemento. Você precisa atribuir uma class ou algo para os botões para identificá-los, digamos ‘dynamicButton’, então altere isto:

  

para isso:

  

E você pode ouvir events com este código:

 $('input.dynamicButton').live('click', function (event) { alert($(this).attr('id')); }); 

Esse manipulador será chamado sempre que um botão com a class ‘dynamicButton’ for clicado, independentemente de como ele é adicionado à página.

Sempre que alguém clica nesse botão, eu quero coletar o ID e, a partir disso, vou fazer alguma tarefa sobre isso ………….

Tente remover o atributo onclick desta linha:

 t = t + " " + item.studId + "" + item.studName + "" + item.studCourse + "" + item.studUsn + ""; 

Fazendo isto:

 t = t + " " + item.studId + "" + item.studName + "" + item.studCourse + "" + item.studUsn + ""; 

E agora você pode usar o método live do jQuery (já que seu botão é gerado dinamicamente) para fazer o truque quando este botão é clicado assim:

 $(function(){ $('#btn').live('click', function(){ var btnId = $(this).attr('id'); alert(btnId); }); }); 

Nota:

Para obter o atributo id , você pode usar o método attr como mostrado acima, por exemplo: $(this).attr('id') not val (que é usado para obter o valor de um elemento de input) como seu em seu código.

Eu fiz isso usando delegate() . No meu caso, um script PHP gera o conteúdo de uma página de um database MySQL. Para cada elemento, um botão é adicionado (clicar nesses botões pode remover o respectivo elemento do database). A remoção é tratada por outro script PHP que esses botões ativam, portanto, um evento de click é anexado a cada botão como este:

 $('.items').delegate('[type="button"]', 'click', remove_item); 

onde os botões fazem parte da class de items e remove_item é o retorno de chamada para a remoção.