Anexar evento a conteúdo dinamico.

Demonstração a anexar evento a conteúdo inserido no DOM via jQuery onde o bind acontece antes do conteúdo estar inserido.

by Salustiano Silva

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<h5>
    Evento de click na TD anexado a 'body' antes do conteúdo inserido no DOM:
    <br/>
    <small>Ver <a href="http://jsfiddle.net/zuul/ahf7Y/">este JSFiddle</a> para o inverso!</small>
</h5>
<div id="isto">
    <div id="pode">
        <div id="funcionar">
        </div>
    </div>
</div>

CSS

#tblPesquisa a{
    text-decoration:none;
}

JavaScript

$('body').on('click', ' #tblPesquisa td', function (e) {
  var ancora = $(this).find('label a');
  var valor = ancora.text();
  alert(valor);
});


var 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>';
str+= '<tr>';
str+= '<td><label><a href="#" title="">Funcionou @pnet ?</a></label></td>';
str+= '<td><label><a href="#" title="">Funcionou @pnet ?</a></label></td>';
str+= '</tr>';
str+= '</tbody>';
str+= '</table>';

$('#funcionar').html(str);