Fazendo a função jquery .on funcionar com conteúdo carregado AJAX
Estou tendo problemas para obter uma função "clique" para trabalhar com conteúdo carregado AJAX.
Eu trabalhei com o jquery .live antes, mas esta é a primeira vez com .on e entender que funciona da mesma maneira tão inseguro porque estou tendo problemas.
Abaixo está o HTML que dá o elemento ao qual você clica
<code> <h1>Press & Media</h1> <div id="back"></div> <div id="overlay-content"> <span id="edocs" class="tab"></span> <span id="news" class="tab"></span> <span id="partners" class="tab"></span> </div> </code>
Abaixo está a função que carrega o conteúdo AJAX.
<code> $("#overlay-content").on('click','#news',function() { var active = 1; $("#loading").show(); $("#overlay-content").fadeOut(1000, function() { $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) { $("#loading").hide(400); $("#overlay-content").empty().append(data).fadeIn(1000); }); }); }); </code>
Isso deve carregar o seguinte HTML
<code> <div id="news-left-panel"> <h4>News Section</h4> <ul> <li id="newsID2" class="newsYear"> <p>2012</p> <ul class="newsMonths" style="display:none"> <li>Jan <ul class="newsArticles" style="display:none"> <li onClick="newsID(2)">test</li> </ul> </li> <li>Feb</li> <li>Mar</li> </ul> </li> <li id="newsID1" class="newsYear"> <p>2011</p> <ul class="newsMonths" style="display:none"> <li>Dec <ul class="newsArticles" style="display:none"> <li onClick="newsID(1)">Test</li> </ul> </li> </ul> </li> </ul> </div> </code>
Agora o código acima simplesmente não será executado, mostre quaisquer erros, etc. no firebug.
Então, eu estou um pouco perdido a respeito de por que ele não é executado, o alerta () nem mesmo é executado.