I have a table with two TD only (CNPJ and Social Reason). My controller has a method that receives 2 parameters (CNPJ or Razao). These parameters are sent via jquery. I can not do the following. When you click on the TD CNPJ or Razao, you should send the TD value in question. See how my code is, after 1 million tries.
$('#tblPesquisa').on('click', 'td', function (e) {
var ancora = $(this).find('label a');
var valor = ancora.text();
alert(teste);
});
It does not even enter the alert. The whole code is like this. My html is dynamic, that is, it builds on the success of ajax.
function DetalhesEvento() {
var str = "";
var obj = {};
$('body').on('click', ' #tblPesquisa td', function (e) {
var ancora = $(this).find('label a');
var valor = ancora.text();
alert(valor);
});
$.ajax({
url: '/GerenciarPDV/DetalhesEvento',
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
data: JSON.stringify({ _cnpj: _cnpjrazao }),
success: function (data) {
alert();
str += '<div class="container col-xs-4 table-overflow" id="tabela">';
str += '<table class="table table-striped table-ordered table-bordered" id="tblPesquisa">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>CNPJ</strong></td>';
str += '<td><strong>Razão Social</strong></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
$(data.detalheEvento).each(function () {
str += '<tr>';// onclick="DetalhesEvento(this)"
str += '<td><a href="DetalhesEvento(this)"><small>' + this.CNPJ + '</small></a></td>';
str += '<td><a href="DetalhesEvento(this)"><small>' + this.RazaoSocial + '</small></a></td>';
str += '</tr>';
})
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '<div class="pull-left">';
str += '<div >';
str += '<label><b>Situação:</b></label>';
switch(data.detalheEvento[0].IS_Ativo){
case true:
str += '<label> Ativo </label>';
break;
case false:
str += '<label> Inativo </label>';
break;
}
str += '<label><b>Status:</b></label>';
switch (data.detalheEvento[0].IT_Status) {
case 1:
str += '<label> OK</label>';
break;
case 2:
str += '<label> Alerta</label>';
break;
case 3:
str += '<label> Erro</label>';
break;
}
str += '</div>';
str += '<div>';
str += '<label><b>Razão Social:</b></label>';
str += '<label>' + data.detalheEvento[0].RazaoSocial + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Nome de Fantasia:</b></label>';
str += '<label>' + data.detalheEvento[0].NomeFantasia + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>CNPJ:</b></label>';
str += '<label>' + data.detalheEvento[0].CNPJ + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Endereço:</b></label>';
str += '<label>' + data.detalheEvento[0].Endereco + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Número:</b></label>';
str += '<label>' + data.detalheEvento[0].Numero + '</label>';
str += '<label><b>Complemento:</b></label>';
str += '<label>' + data.detalheEvento[0].Complemento + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Bairro:</b></label>';
str += '<label>' + data.detalheEvento[0].Bairro + '</label>';
str += '<label><b>CEP:</b></label>';
str += '<label>' + data.detalheEvento[0].CEP + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Cidade:</b></label>';
str += '<label>' + data.detalheEvento[0].Cidade + '</label>';
str += '<label><b>Estado:</b></label>';
str += '<label>' + data.detalheEvento[0].Estado + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Telefone Fixo:</b></label>';
str += '<label>' + data.detalheEvento[0].Telefone + '</label>';
str += '<label><b>Celular:</b></label>';
str += '<label>' + data.detalheEvento[0].Celular + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tipo:</b></label>';
str += '<label>' + data.detalheEvento[0].tipo + '</label>';
str += '<label><b>Qtde Checkouts:</b></label>';
if (data.result_dim[0].Checkout > 0) {
str += '<label>' + data.result_dim[0].Checkout + '</label>';
} else {
str += '<label>Não há informação</label>'
}
str += '</div>';
str += '<div>';
str += '<label><b>Tipo da Rede:</b></label>';
str += '<label>' + data.detalheEvento[0].Nome + '</label>';
str += '<label><b>Nome da Rede:</b></label>';
str += '<label>' + data.detalheEvento[0].NomeRede + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Contato:</b></label>';
str += '<label>' + data.detalheEvento[0].contato + '</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tel. Contato:</b></label>';
str += '<label>' + data.detalheEvento[0].tel_contato + '</label>';
str += '<label><b>Cel. Contato:</b></label>';
str += '<label>' + data.detalheEvento[0].cel_contato + '</label>';
str += '</div>';
str += '<div>';
str += '<div>';
str += '<div class="pull-right">';
//str += '<div>';
str += '<button type="button" class="btn btn-danger">Inativar</button>';
str += '<button type="button" class="btn btn-primary">Add</button>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '<div class="pull-right" id="tabela4">';
str += '<br />';
str += '<table class="table table-striped table-ordered table-bordered col-md-4">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>ID Evento</strong></td>';
str += '<td><strong>Tipo</strong></td>';
str += '<td><strong>Usuário</strong></td>';
str += '<td><strong>Data de Inclusão</strong></td>';
str += '<td></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
$(data.result_evento).each(function () {
//var data_evento = getFormattedDate(data.result_evento);
str += '<tr>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_CRM_Evento + '</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_TipoEvento + '</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.DE_Usuario + '</small></td>';
str += '<td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + getFormattedDate(this.DT_Inclusao) + '</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><button type="button" class="btn btn-primary">Abrir</button></td>';
str += '</tr>';
});
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '</div>';
str += '</form>';
str += '</div>';
$('#montaPesquisaGrid').html(str);
str = "";
},
error: function (error) {
}
});
}
My cshtml as is. It has 4 tabs and this is tab 1.
@model List<V99SuporteTecnico.Models.T_PDV>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pt-BR" class="no-js">
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width" />
<title>GerenciarPDV</title>
@*<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen"/>
<script src="~/Scripts/bootstrap-datepicker.js" ></script>*@
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Styles.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen" />
@*<script src="~/Scripts/bootstrap-datepicker.js"></script>*@
@*<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>*@
</head>
<body>
<div id="tabs" style="border: none">
<ul>
<li><a href="#tabs-1">PDV</a></li>
<li><a href="#tabs-2">Eventos</a></li>
<li><a href="#tabs-3">Formulários</a></li>
<li class="agendamento"><a href="#agendamento">Agendamento</a></li>
</ul>
<div id="tabs-1">
<form role="form">
<!--A tag ul contem os titulos das abas-->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtCnpjPdv">CNPJ/Razão Social:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtContato">Contato:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o contato" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede">
<option value="SemFiltro">Sem Filtro</option>
<option value="Associativa">Associativa</option>
<option value="Franquia">Franquia</option>
<option value="Propria">Própria</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus">
<option value="SemFiltro">Sem Filtro</option>
<option value="Ok">Ok</option>
<option value="Atençao">Atenção</option>
<option value="Erro">Erro</option>
<option value="NaoCadastrado">Não Cadastrado</option>
<option value="Desativado">Desativado</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao">
<option value="Geral">Geral</option>
<option value="SouzaCruz">Souza Cruz</option>
</select>
</div>
<button type="button" class="btn btn-success" onclick=" return MontaGridPdv();">Pesquisar</button>
<br />
<br />
</div>
<div id="montaPesquisaGrid">
</div>
</form>
</div>
@*Fim div tab-1*@
<div id="tabs-3">
</div>
@*Fim div tab-3*@
<div id="agendamento">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtCnpjOs" class="col-sm-1 control-label">CNPJ:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="txtCnpjOs" placeholder="Digite o Cnpj">
</div>
<label for="txtOS" class="col-sm-1 control-label">OS:</label>
<div class="col-sm-2">
<input type="text" class="form-control input-small" id="txtOS" placeholder="Digite o numero da OS">
</div>
<input id="btnPesquisar" type="button" class="btn btn-success" value="Pesquisar" onclick=" return MontaAgendamento();" />
</div>
</form>
<br />
<div id="filtro">
<div id="FiltroPesquisa">
</div> @*Div filtro pesquisa*@
</div> @*Div filtro*@
</div> @*Fecho a div agendamento*@
<div id="tabs-2">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtCnpj" class="col-sm-2 control-label">CNPJ:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
</div>
<label for="imgStatus" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<img src="~/Images/Certo.png" class="img-responsive col-md-4 control-label" id="imgStatus" />
</div>
</div>
<div class="form-group">
<label for="txtRazaoSocial" class="col-md-2 control-label">Razão Social:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
</div>
</div>
<div class="form-group">
<label for="txtIdEvento" class="col-md-2 control-label">ID Evento:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
</div>
</div>
<div class="form-group">
<label for="txtDescricao" class="col-md-2 control-label">Descrição:</label>
<div class="col-md-3">
<textarea class="form-control" id="txtDescricao" placeholder="Digite uma descrição" rows="4"></textarea>
</div>
<label for="ddlTipoEvento" class="col-md-2 control-label">Tipo Evento:</label>
<div class="col-md-3">
<select class="form-control" name="ddlTipoEvento" id="ddlTipoEvento">
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
</div>
<div class="form-group">
<label for="ddlAcao" class="col-md-2 control-label">Próxima Ação:</label>
<div class="col-md-3">
<select class="form-control" id="ddlAcao">
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
<label for="ddlUsuario" class="col-md-2 control-label">Usuário:</label>
<div class="col-md-3">
<select class="form-control" id="ddlUsuario">
<option selected="selected" value="0"></option>
</select>
</div>
</div>
<div class="control-group">
<label for="txtUsuarioProxAcao" class="col-md-2 control-label">Data Próxima Ação:</label>
<div class="col-md-3">
<input type="text" class="datepicker" id="txtUsuarioProxAcao" />
</div>
<button type="button" class="btn btn-success">Finalizar</button>
<button type="button" class="btn btn-success" onclick=" return ">Confirmar</button>
</div>
<br />
<div class="control-group">
<button type="button" class="btn btn-primary">Pesquisar</button>
<button type="button" class="btn btn-warning" onclick=" return ">Cancelar</button>
<button type="button" class="btn btn-success" onclick=" return GravaEvento();">Confirmar</button>
</div>
<br />
<div id="subtabs" style="border: none">
<ul>
<li><a href="#tabs-11">Eventos PDV</a></li>
<li><a href="#tabs-21">Minhas Tarefas</a></li>
</ul>
<div id="tabs-11">
<div class="pull-right" id="tabela4">
<br />
<table class="table table-striped table-ordered table-bordered">
<thead>
<tr>
<td><strong>ID</strong></td>
<td><strong>Tipo</strong></td>
<td><strong>Descrição</strong></td>
<td><strong>Usuário</strong></td>
<td><strong>Data de Inclusão</strong></td>
<td><strong>Status</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_CRM_Evento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.DE_Usuario getFormattedDate(this.DT_Inclusao)</small></td>
<td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>Paulo Silva</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>03/07/2014 14:48:09</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-primary">Visualizar</button></td>
</tr>
<tr>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_CRM_Evento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.DE_Usuario getFormattedDate(this.DT_Inclusao)</small></td>
<td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>Araken leão</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>03/07/2014 14:48:09</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-primary">Visualizar</button></td>
</tr>
<tr>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_CRM_Evento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.DE_Usuario getFormattedDate(this.DT_Inclusao)</small></td>
<td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>Flávia</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>03/07/2014 14:48:09</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>this.ID_TipoEvento</small></td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-primary">Visualizar</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-21">
<div class="form-group">
<label for="txtFiltroData" class="col-md-2 control-label">Filtro por data:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="txtFiltroData" placeholder="Digite uma data válida">
</div>
<label for="ddlFiltro" class="col-md-2 control-label">Ação:</label>
<div class="col-md-2">
<select class="form-control" id="ddlFiltro">
<option selected="selected" value="0"></option>
<option value="2">Sem Filtro</option>
<option value="8">Aberto</option>
<option value="6">Finalizado</option>
</select>
</div>
<button type="button" class="btn btn-primary">Filtrar</button>
</div>
</div>
</form>
</div>
</div>
<input type="hidden" id="txtCnpjRazao" />
</body>
<script src="@Url.Content("~/Scripts/jquery.maskedinput.min.js")"></script>
<script src="@Url.Content("~/Scripts/Menu.js")"></script>
@*<script src="@Url.Content("~/Scripts/main.js")"></script>*@
<script src="@Url.Content("~/Scripts/jquery-color.js")"></script>
<script src="@Url.Content("~/Scripts/Util.js")"></script>
<script src="@Url.Content("~/Scripts/GerenciarPDV/GerenciarPDV.js")"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</html>