Funkcja jquery .on działa z treścią ładowaną przez AJAX
Mam problem z uzyskaniem funkcji .on 'click' do pracy z ładowaną treścią AJAX.
Pracowałem wcześniej z jquery .live, ale to pierwszy raz z .on i zrozumiem, że działa dokładnie tak samo, więc nie wiem, dlaczego mam problemy.
Poniżej znajduje się kod HTML, który daje element, na który klikniesz
<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>
Poniżej znajduje się funkcja, która ładuje zawartość AJAX.
$("#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);
});
});
});
Powinno to załadować następujący kod HTML
<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>
Teraz powyższy kod po prostu nie zostanie wykonany, pokaże błędy itp. W firebugu.
Więc jestem trochę zagubiony, dlaczego nie zostanie wykonany, alert () nawet nie działa.