elementos acesso DOM após ajax.load

Question

Estou inserindo a resposta HTML de uma chamada de AJAX para minha página, mas quando tento acessar esses elementos depois que eles foram criados, ele falhar ..

Isto é como eu recuperar e inserir o código HTML:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

O HTML resultado, que é inserido no <div> (id = my_container) se parece com:

<div id="my_container">
   <ul>
      <li id="578" class="notselected">milk</li>
      <li id="579" class="notselected">ice cream</li>
      <li id="580" class="selected">chewing gum</li>
   </ul>
</div>

... e depois, quando tento acessar qualquer um dos elementos <li> usando consultas como: $('#my_container li:first') ou $('#my_container ul:first-child') ou similar, nada é selecionado.

Eu estou usando o Ouvir plug-in para detectar quaisquer eventos de clique nas <li>elements e ele funciona ... Mas eu não conseguia descobrir como detectar se o div é preenchido com o HTML de saída e, consequentemente, alterar uma das classe do <li> por exemplo ...

$(document).ready não quer trabalhar ...

Imagine que eu preciso mudar o estilo css do segundo <li> .. qual é a solução para isso?

Answer 1

Como você está verificando para ver se a sua chamada AJAX foi concluída? Porque é assíncrona, os elementos não será, é claro, estar disponível para o código que executa imediatamente após a sua chamada $.ajax(…).

Tente manipular os elementos de dentro da função success ou em outro código que é chamado de lá -. Nesse ponto, você vai saber que o conteúdo está disponível

Answer 2

Você tem certeza seu pedido real é bem sucedido? Se nada for selecionado, o mais provável razão é que nada foi realmente inserido #my_container em primeiro lugar.

Answer 3

Primeiro, tente o seguinte código (em lugar da chamada AJAX original que você mostrou):

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

Se isto funcionar, o seletor li:first está apenas a ser chamado antes da solicitação AJAX acabamentos. Se isso não funcionar, tente o seguinte código:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) { $('#my_container').html(outData); }, 
   error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});

Isso fará com que uma mensagem de erro de pop-up, se o pedido falhar. Se uma mensagem de erro aparece com uma mensagem de erro, o pedido não está retornando.

Answer 4

é Parece que você está tentando acesso a esses elementos antes de sua foi criado porque a sua chamada ajax atual é assíncrona, tentar colocar a opção: "async = false" à sua ajax e ele deve ser trabalho.