div에 콘텐츠를로드하는 데 AJAX를 사용하는 사이드 바 탐색 기능을 구축하려고합니다. 지금까지 큰 성과를 거두었습니다. 버튼을 클릭하여 내 페이지의 다른 사이트로 이동할 때마다 사이트 콘텐츠가 현재 콘텐츠 상단에로드되는 것 같습니다.AJAX에서 콘텐츠를 두 번로드합니다.
모든 사이트로드에서 내 사이트가 서버에 하나의 요청을 보내서 데이터를 가져 오기 때문에이 가설이 있습니다.
이제 내 페이지의 사이트를 방문한 경우이 요청을 보내고 내 페이지의 다른 사이트로 이동 한 후 다시 첫 번째 사이트로 이동하면이 사이트는 서버에 두 가지 요청을 보냅니다.) (
<div id="sidedrawer" class="mui--no-user-select">
<div class="mui-divider"></div>
<ul>
<li onClick="remote();" href="./#remote">
<strong><a href="./#remote" class="navbarlink">Remote</a></strong>
</li>
<li onClick="groups();" href="./#groups">
<strong><a href="./#groups" class="navbarlink">Groups</a></strong>
</li>
<li onClick="devices();" href="./#devices">
<strong><a href="./#devices" class="navbarlink">Devices</a></strong>
</li>
<li onClick="users();" href="./#users">
<strong><a href="./#users" class="navbarlink">Users</a></strong>
</li>
<li onClick="programs();" href="./#programs">
<strong><a href="./#programs" class="navbarlink">Programs</a></strong>
</li>
<li onClick="settings();" href="./#settings">
<strong><a href="./#settings" class="navbarlink">Settings</a></strong>
</li>
</ul>
</div>
기능 원격 : 그 단계를 반복하고 경우 , 그것은 그냥 추가하고 요청 3,4,5..times
이 내 탐색 줄의 코드를 보내집니다/그룹()/장치() 거의 같은 모양 :
function remote() {
showSubPage("Remote", "./remote.php");
}
showSubpage()는 다음과 같습니다
function showSubPage(title, page){
changeTabName(title);
$.ajax({
url: page,
type: "GET",
cache: false,
success:function(data){
var $main = $('#main');
$main.html('');
$main.html(data);
}
});
}
홈페이지는 정상 사업부입니다 :
<div id="main"></div>
사람이 내 페이지마다 내가 링크를 클릭 한 번만 호출되지 않는 이유 아이디어가 있습니까?
편집 : 내 페이지의 소스 코드를 조사 할 때 콘텐츠는 한 번만 표시됩니다.
편집 2 : 저는 문제가 아약스 자체에서 온 것이 아니라고 생각했습니다. 이것은 내 페이지를 생성하는 데 사용하는 PHP 코드입니다.
function addGroup($groupId, $groupname, $devicearr)
{
echo('<div class="group">
<h3>'.$groupname);
echo('<div class="verticalcenter"><div class="toggle-button toggle-button-selected " id="groupButton'.$groupId.'"><button></button></div></div>');
echo(' </h3>
<div>
<table class="devicetable">
');
foreach ($devicearr as &$device) {
echo('<tr>
<td>'.$device['name'].'</td>');
if($device['status'] == 1){
echo('<td class="togglecolumn"><div class="verticalcenter" ><div class="toggle-button toggle-button-selected group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'" ><button></button></div></div></td></tr>');
} else {
echo('<td class="togglecolumn"><div class="verticalcenter"><div class="toggle-button group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'"><button></button></div></div></td></tr>');
}
echo ('<script>
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
if($("#group'.$groupId.'device'.$device['id'].'").hasClass("toggle-button-selected")){
$(".device'.$device['id'].'").removeClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
else{
$(".device'.$device['id'].'").addClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
});
</script>');
}
echo('
</table>
</div>
</div>');
}
내 코드는 "devicearr"에있는 "device"마다 버튼을 만듭니다. 그러나 내 페이지가 두 번 호출되고 버튼을 한 번 클릭하면 두 번의 클릭 이벤트가 등록됩니다. 대신
데이터로 반환되는 값의 예는 무엇입니까? – Gary
클릭 처리기는 https://jsfiddle.net/RoryMcCrossan/1hesztbt/와 같이 한 번만 실행해야합니다. –
왜'$ main.load (page, callback)'하지 않겠습니까? – Dimava