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
<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>
Poniżej znajduje się funkcja, która ładuje zawartość 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>
Powinno to załadować następujący kod 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>
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.