ajax.load 다음에 DOM 요소에 액세스하십시오

StackOverflow https://stackoverflow.com/questions/414943

문제

AJAX 호출에서 HTML 응답을 내 페이지에 삽입하고 있지만 해당 요소가 생성 된 후 해당 요소에 액세스하려고하면 실패합니다.

이것이 내가 HTML을 검색하고 삽입하는 방법입니다.

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

결과 HTML은 <div> (ID = my_container)은 다음과 같습니다.

<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>

... 그리고 나중에 내가 <li> 다음과 같은 쿼리를 사용하는 요소$('#my_container li:first') 또는$('#my_container ul:first-child') 또는 유사하게 선택되지 않습니다.

나는 그것을 사용하고있다 플러그인을 듣습니다 클릭 이벤트를 감지합니다 <li>요소와 IT는 작동합니다 ... 그러나 DIV가 출력 HTML로 채워져 있는지 여부를 감지하는 방법을 알 수 없었습니다. <li>예를 들어 ...

$(document).ready 작동하지 않습니다 ...

두 번째 CSS 스타일을 변경해야한다고 상상해보십시오. <li>.. 이것에 대한 해결책은 무엇입니까?

도움이 되었습니까?

해결책

Ajax 호출이 완료되었는지 확인하기 위해 어떻게 확인하고 있습니까? 비동기식이기 때문에 요소는 물론 귀하의 직후에 실행되는 코드에서 사용할 수 없습니다. $.ajax(…) 전화.

내에서 해당 요소를 조작해보십시오 success 기능 또는 거기에서 호출되는 다른 코드에서 - 그 시점에서, 당신은 콘텐츠를 사용할 수 있음을 알게 될 것입니다.

다른 팁

실제 요청이 성공했다고 확신합니까? 아무것도 선택되지 않으면 가장 중요한 이유는 처음에 #MY_Container에 실제로 삽입 된 것이 없기 때문입니다.

먼저 다음 코드를 사용해보십시오 (원래 Ajax 호출 대신 표시) :

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

그것이 작동한다면, 당신의 li:first AJAX 요청이 완료되기 전에 선택기가 호출되고 있습니다. 그래도 작동하지 않으면 다음 코드를 사용해보십시오.

$.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); }
});

요청이 실패하면 오류 메시지가 나타납니다. 오류 메시지가 오류 메시지가 표시되면 요청이 반환되지 않습니다.

현재 Ajax 호출이 비동기식이기 때문에 생성되기 전에 해당 요소에 액세스하려고하는 것처럼 보입니다. 옵션을 작성하십시오."async = false" 당신의 ajax와 그것은 일이어야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top