jquery .on 함수가 AJAX 로드된 콘텐츠와 함께 작동하도록 만드는 중
AJAX 로드된 콘텐츠에서 작업할 .on 'click' 기능을 얻는 데 문제가 있습니다.
저는 jquery.live와 함께 일한 적이 있지만, .on과 함께 일한 것은 이번이 처음이며, 왜 문제가 있는지 확신할 수 없습니다.
아래는 클릭하는 요소를 제공하는 HTML입니다.
<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>
아래는 AJAX 콘텐츠를 로드하는 함수입니다.
$("#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);
});
});
});
다음 HTML을 로드해야 합니다.
<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>
이제 위의 코드는 단순히 실행되지 않고 오류 등을 파이어버그에 표시합니다.
그래서 왜 실행되지 않는지, 경보()가 실행되지 않는지에 대해 약간 혼란스럽습니다.
먼저 대상에 도달했는지 확인하고, 이를 시도하여 경고가 표시되는지 확인합니다.
$(function() {
$(document).on('click', '#news', function() {
alert('ok');
});
});
#news 요소를 클릭할 때 알림이 표시되면 괜찮습니다.
이제 다음 줄로 이동합니다.
$.get("http://<? echo ROOT; ?>includes/functions.php",
당신은 속기 PHP 오프닝을 사용하고 있고, 그것을 켜야 합니다, 당신은 시도할 수 있습니다.
<?php echo ROOT; ?>
그러나 그 프랙이 ROOT인 것은, 이전에 본 적이 없고, ROOT의 PHP 매뉴얼에서 아무것도 찾을 수 없었기 때문에, 나는 내 서버에서 최신 버전의 PHP를 사용해 보았더니, 'ROOT'가 존재하지 않고, 대신 문자열이라고 가정하고 그냥 'ROOT'를 에코했기 때문에, 당신의 링크는 다음과 같이 보일 것입니다.
$.get("http://ROOTincludes/functions.php",
사용자가 직접 정의한 변수입니다. 사용자가 정의한 변수라면 달러 기호로 시작해야 합니다.define()설정이 올바른지 확인하고 다음과 같은 것을 사용하는지 확인합니다.$_SERVER['DOCUMENT_ROOT'];일반적으로 웹 루트보다 높은 폴더이며 클라이언트 측에서는 액세스할 수 없고 서버 측에서만 액세스할 수 있기 때문에 자바스크립트로 항상 액세스할 수 있는 것은 아닙니다.
이 쓴 또한작, 이한방시식로작으로 합니다.http://도메인 이름이어야 합니다.브라우저에서 뷰 소스를 열고 Ajax 함수를 찾아 루트가 실제로 어떤 출력을 출력하는지 확인합니다. 최종 출력은 소스에 표시되며 포함된 구성 파일에서 define()을 사용하여 설정되었는지 확인합니다.올바르게 설정되었음을 알 수 있습니다.
또한 자바스크립트는 PHP를 실행하기 위해 PHP 파일 안에 있어야 하거나, PHP를 통해 JS 파일을 실행하기 위해 서버 설정을 수정해야 합니다.
경로와 파일 이름을 사용하는 것이 올바른 방법이라고 생각합니다. 사용해 보고 콘솔에 주의를 기울입니다(F12).
$(document).on('click','#news',function() {
var active = 1;
var XHR = $.ajax({
type: 'GET',
url : '/actualpath/includes/functions.php',
data: { pressmediaNews: active }
}).done(function(data) {
console.log(data);
}).fail(function(e1, e2, e3) {
console.log('error : '+e1+' - '+e2+' - '+e3);
});
$("#loading").show();
$("#overlay-content").fadeOut(1000, function() {
XHR.done(function(data) {
$("#overlay-content").empty().append(data).fadeIn(1000);
$("#loading").hide(400);
});
});
});
대리자 사용:
$('#overlay-content').on('click', '#newsID2', function() { });
이벤트를 다음 날짜에 바인딩 날짜:#overlay-content버블링 이벤트가 발생했는지 확인합니다.#newsID2.
참고로:이벤트 핸들러에 오타가 있습니다(chikdren그래야 한다children) 그리고 당신은 정말로 이 추악한 것을 없애야 합니다.onClick인라인 이벤트
다음과 같이 해야 합니다.
$("#overlay-content").on('click', '#newsID2', function() {
....
});
다른 말로 하면,
$('.wrapper').on('event', '.target', function() {
...
});
어디에.wrapper이미 존재하는 요소(또는 문서)입니다..target이벤트를 실행할 래퍼 내부의 요소입니다.
그live함수는 기본적으로 다음과 같습니다.
$(document).on('event', '.target', function() {
...
});
http://bugs.jquery.com/ticket/11203
핵심문장
새 HTML이 페이지에 주입되는 경우 새 HTML이 페이지에 배치된 후 요소를 선택하고 이벤트 핸들러를 첨부합니다.
이 시나리오에서 작업하려면 선택기 매개 변수를 사용하여 문서 개체에 바인딩해 보십시오.
$(document).on('click','#news',function() {...}
이전에 .live()로 작업한 적이 있다고 했으므로, 문서를 추가하기 전에 문서에 추가하는 항목에 클릭을 바인딩하려고 하는 것이 문제가 될 수 있습니까?
라이브를 사용할 때는 이러한 종류의 작업을 자동으로 처리하지만 라이브를 사용하지 않을 때는 일반적으로 이벤트를 바인딩하기 전에 페이지에 존재해야 합니다.AJAX에 무언가를 추가하면 AJAX에 로드하기 전에 해당 항목에 대한 클릭 이벤트를 설정할 수 없습니다..live()를 사용하면 미리 이 작업을 수행할 수 있습니다.
저는 다음과 같이 할 것입니다.
$("#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);
//put your delegate/call/function,etc here
});
});
});
뉴스 왼쪽 패널
년_월_뉴스귀하의 뉴스 연도, 월, 뉴스 ID입니다.예를 들어 2012_5_16, 2012_5_17 등입니다.
<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 id="year_Month_newsID">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 id="year_Month_newsID">Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery 함수
$("#news-left-panel ul li").live("click", function(event) {
var news=(this.id).split("_");
var year=news[0];
var month=news[1];
var newsID =news[2];
$.ajax({
type: "POST",
url: 'http://<? echo ROOT; ?>includes/functions.php',
data: {
year: year,month:month,newsID :newsID
},
error: function(){
$('#news').html( "<p>Page Not Found!!</p>" );
// Here Loader animation
},
beforeSend: function(){
// Here Loader animation
$("#news").html('');
},
success: function(data) {
$('#news').html(data);
}
});
});
Ajax 호출이 정확한가요? / 올바른 HTML을 반환합니까?
여기서 $.get193을 setTimeout()으로 대체했습니다(그리고 약간 단순화했습니다). http://jsfiddle.net/q23st/
효과가 있는 것 같으니 $.get()이 반환 예정 금액을 반환하지 않는 것 같습니다.
언급URL : https://stackoverflow.com/questions/10416689/making-jquery-on-function-work-with-ajax-loaded-content
'programing' 카테고리의 다른 글
| Git가 내 파일이 변경된 것을 인식하지 못하는 이유는 무엇입니까? 따라서 Git add가 작동하지 않습니다. (0) | 2023.08.28 |
|---|---|
| iOS에서 인스타그램에서 이미지를 공유하는 방법은 무엇입니까? (0) | 2023.08.28 |
| Docker-Compose를 사용하여 MariaDB에 연결하는 동안 오류가 발생했습니다. "연결 끊김:서버가 연결을 닫았습니다." (0) | 2023.08.28 |
| Xcode - 테스트 호스트를 찾을 수 없습니다. (0) | 2023.08.28 |
| 각 루프에 대한 다음 요소 가져오기 (0) | 2023.08.28 |