Como ligar eventos em Ajax conteúdo carregado?
Eu tenho um linkmyLink
, que deve inserir conteúdo carregado em AJAX em umdiv
(appendedContainer) da minha página HTML. O problema é que oclick
O evento que tenho ligado com jQuery não está sendo executado no conteúdo recém-carregado que é inserido no appendedContainer. oclick
O evento é ligado a elementos DOM que não são carregados com a minha função AJAX.
O que eu tenho que mudar, para que o evento seja vinculado?
Meu HTML:
<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>
Meu JavaScript:
$(".LoadFromAjax").on("click", function(event) {
event.preventDefault();
var url = $(this).attr("href"),
appendedContainer = $(".appendedContainer");
$.ajax({
url: url,
type : 'get',
complete : function( qXHR, textStatus ) {
if (textStatus === 'success') {
var data = qXHR.responseText
appendedContainer.hide();
appendedContainer.append(data);
appendedContainer.fadeIn();
}
}
});
});
$(".mylink").on("click", function(event) { alert("new link clicked!");});
O conteúdo a ser carregado:
<div>some content</div>
<a class="mylink" href="otherurl">Link</a>