ajax.load 다음에 DOM 요소에 액세스하십시오
-
03-07-2019 - |
문제
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와 그것은 일이어야합니다.