Incluindo html dinamicamente com AJAX - AJUDA

Galera, estou usando jsp,ajax e hibernate e postgres, bem simples. O sistema cria uma grid a partir de registros do bd. O problema é eu incluo os registros como pequenos cartões com 3 botões: excluir, exibir(abre uma div) e editar(abre uma div). Estou usando thickBox que funciona colocando no href o caminho para chamar sua div. Como os botões são incluidos dinamicamente com ajax, não funciona a chamada dessa div, só funciona se o hmtl ja estiver no .jsp e não se for incluido dinamicamente. Ajudaaeee, por favor :wink:

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Projetos</title>
<link href="estilos/global.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="estilos/thickbox.css" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />

<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery/thickbox.js"></script>

<script type="text/javascript" src="javascript/projetos.js"></script>
<script type="text/javascript" src="../javascript/cadastrarEquipe.js"></script>
<script type="text/javascript" src="../javascript/cadastrarProjetos.js"></script>

</head>

<body onload="exibirProjetos()">


<div id="container">
  <div id="header">
    <div id="logo"><img src="imagens/logo.png" width="358" height="88" /></div>
	<div id="menu">
    	<ul  >
			<li ><a href="divs/divCadastrarProjetos.jsp?KeepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">Criar projeto</a></li>
			<li ><a href="divs/divCadastrarEquipe.jsp?KeepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">Criar equipe</a></li>
		</ul>
 		</div>	
 		
  <!-- end #header --></div>
  <div id="mainContent">
  
  <div id="registrosGrid"></div>
         
	</div>
 
 </div>
</body>
</html>

projetos.jsp



function iniciarRequisicao() {
	
	 var request = false;  
	             try 
	             {  
	                 request = new XMLHttpRequest();  
	             }
	             catch (trymicrosoft) 
	             {  
	                 try 
	                 {  
	                     request = new ActiveXObject("Msxml2.XMLHTTP");  
	                 } 
	                 catch (othermicrosoft) 
	                 {  
	                     try 
	                     {  
	                         request = new ActiveXObject("Microsoft.XMLHTTP");  
	                     } catch (failed) 
	                     {  
	                         request = false;  
	                     }    
	                 }
	                 
	             }  
	return request;
}

function exibirProjetos()
{

	var url=null;
	
	url="ajax/ajaxProjetos.jsp?comando=exibirProjetos";
	
	var requisicaoLocal=iniciarRequisicao();
	requisicaoLocal.onreadystatechange=function()
		{
		respostaExibirProjetos(requisicaoLocal);
		};
	requisicaoLocal.open("POST",url,'false');
	requisicaoLocal.send(null);

}

function respostaExibirProjetos(requisicao) 
{
	if(requisicao.readyState==4)
	{
		if(requisicao.status==200)
		{
			var xml=requisicao.responseXML;	
			var registros=xml.getElementsByTagName("registros");
			var html = "<html>";
			
			for(i = 0; i<registros.length;i++){
				
				var id = registros[i].getElementsByTagName("id").item(0).firstChild.data; 
				var nomeProjeto = registros[i].getElementsByTagName("nomeProjeto").item(0).firstChild.data;
				var cliente = registros[i].getElementsByTagName("cliente").item(0).firstChild.data;
				var dataInicio = registros[i].getElementsByTagName("dataInicio").item(0).firstChild.data;
				var dataEntrega = registros[i].getElementsByTagName("dataEntrega").item(0).firstChild.data;
				var statusProjeto = registros[i].getElementsByTagName("statusProjeto").item(0).firstChild.data;
				
				
				if(statusProjeto=='aFazer'){
				
				
				html+= "<div id='box' class='boxAFazer'>";
				html+= "<p class='titulo'>" + nomeProjeto + "</p>";
				html+= " 	<p class='icones'>";
				html+= "		<img src='imagens/editar.png' width='32' height='32' />";
				html+= " 		<img  src='imagens/ver.png' width='32' height='32' />";
				html+= " 		<img src='imagens/excluir.png' type='button' width='32' height='32' onclick='excluirProjeto("+ id +")' />";
				html+= "   	</p>";
				html+= "    <p class='data'>Cliente: " + cliente + "</p>";
				html+= "    <p class='data'>Data Inicio: " + dataInicio + "</p>";
				html+= "    <p class='data'>Data Entrega: " + dataEntrega + " </p>";
				html+= "   </div>";
				html+= "</html>";
				
				document.getElementById("registrosGrid").innerHTML = html;
				
				}else if(statusProjeto=='fazendo'){
					
		
					
					html+= "<div id='box' class='boxFazendo'>";
					html+= "<p class='titulo'>" + nomeProjeto + "</p>";
					html+= " 	<p class='icones'>";
					html+= "		<img src='imagens/editar.png' width='32' height='32' />";
					html+= " 		<img src='imagens/ver.png' width='32' height='32' />";
					html+= " 		<img src='imagens/excluir.png' type='button' width='32' height='32' onclick='excluirProjeto("+ id +")' />";
					html+= "   	</p>";
					html+= "    <p class='data'>Cliente: " + cliente + "</p>";
					html+= "    <p class='data'>Data Inicio: " + dataInicio + "</p>";
					html+= "    <p class='data'>Data Entrega: " + dataEntrega + " </p>";
					html+= "   </div>";
					html+= "</html>"				
					
				document.getElementById("registrosGrid").innerHTML = html;		
					
				}else{
					
					
					html+= "<div id='box' class='boxFeito'>";
					html+= "<p class='titulo'>" + nomeProjeto + "</p>";
					html+= " 	<p class='icones'>";
					html+= "		<img src='imagens/editar.png' width='32' height='32' />";
					html+= " 		<img src='imagens/ver.png' width='32' height='32' />";
					html+= " 		<img src='imagens/excluir.png' type='button' width='32' height='32' onclick='excluirProjeto("+ id +")' />";
					html+= "   	</p>";
					html+= "    <p class='data'>Cliente: " + cliente + "</p>";
					html+= "    <p class='data'>Data Inicio: " + dataInicio + "</p>";
					html+= "    <p class='data'>Data Entrega: " + dataEntrega + " </p>";
					html+= "   </div>";
					html+= "</html>"				
										
				document.getElementById("registrosGrid").innerHTML = html;
						
				}
			}
		}
	}
}

projetos.js



<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.idone.hibernate.SessaoUtil"%>
<%@page import="com.idone.beans.ProjetosBeans"%>
<%@page import="com.idone.DAO.ProjetosDAO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

String comando = request.getParameter("comando");
StringBuffer retorno = new StringBuffer();

	List listaProjetos = null;
	ProjetosDAO objProjetos = new ProjetosDAO();
	ProjetosBeans bean = new ProjetosBeans();

if(comando.equals("exibirProjetos")){

	listaProjetos = objProjetos.exibirProjetos();
	
	retorno.append("<?xml version='1.0' ?>");
	retorno.append("\n<root>\n");
	retorno.append("<list>\n");
	
	for(int i = 0; i<listaProjetos.size(); i++){
	
		bean =(ProjetosBeans) listaProjetos.get(i);
		
		
		retorno.append("<registros>\n");
		retorno.append("		<id>"+  bean.getId() +"</id>\n");
		retorno.append("		<nomeProjeto>"+ bean.getNomeProjeto() +"</nomeProjeto>\n");				
		retorno.append("		<cliente>"+ bean.getCliente() +"</cliente>\n");
		retorno.append("		<dataInicio>"+ bean.getDataInicio() +"</dataInicio>\n");				
		retorno.append("		<dataEntrega>"+ bean.getDataEntrega()+"</dataEntrega>\n");
		retorno.append("		<statusProjeto>"+ bean.getStatusProjeto()+"</statusProjeto>\n");	
		retorno.append("</registros>\n");
	
	}
	
	retorno.append("</list>\n");
	retorno.append("</root>\n");
}


if(comando.equals("excluirProjeto")){
	
	int excluiu = 1;
	String id = request.getParameter("id");
	
	try{
	
	SessaoUtil.openSession();
	
   listaProjetos = SessaoUtil.consultar("com.idone.beans.ProjetosBeans", "id", "i", "=", id, "s", "id asc", 0, 0);
	
	for(int i = 0; i<listaProjetos.size(); i++)
		bean =(ProjetosBeans) listaProjetos.get(i);
	
	
	
	objProjetos.excluirProjeto(bean);
	
	}catch (Exception e){

		SessaoUtil.currentSession().getTransaction().rollback();
		excluiu=0;
	}
	
	retorno.append("<excluiu>"+ excluiu +"</excluiu>\n");
}

response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(retorno.toString());
%>
    

ajaxProjetos.jsp

alguem? ;~D

Cara vc não colocou nenhum evento no seus botões, so colocou no botão excluir.

//Aonde est o onclick do editar\ver?
html+= "        <img src='imagens/editar.png' width='32' height='32' />";   
html+= "        <img  src='imagens/ver.png' width='32' height='32' />";   
html+= "        <img src='imagens/excluir.png' type='button' width='32' height='32' onclick='excluirProjeto("+ id +")' />";   

O seu problema não é colocar dinamicamente.

é por que o onclick do excluir ele chama uma função. Os outros vão abrir uma div. No thickbox se abre uma div assim:

a href="divs/divCadastrarProjetos.jsp?KeepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">

Solução genérica?

http://www.cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders

Se você puder usar jquery leia sobre o método live…quando o jquery não tinha este método usave-se um plugin para o mesmo chamado livequery para resolver problemas deste tipo…

huuum, vou testar aquii pra ver qual é, se der certo eu digo. valeu