AJAX에 관한 두 가지 문제점

Question

php databasequery로 채워진 페이지를 만들었습니다. (모든 행은 MySQL 테이블에서 읽히고 HTML로 테이블에 기록됩니다). 10 초마다 동일한 PHP 스크립트가 jQuery AJAX에 의해 요청되고 현재 테이블 내용을 새로 고쳐야합니다. 이 함수의 반환 값은 표 HTML 값을 변경하는 데 사용됩니다.

테이블에 버튼이 있습니다. 버튼을 클릭하면 켜기에서 끄기로 바뀌며 다른 PHP 파일은 AJAX로 호출됩니다. 그러면 AJAX는 쉘 명령을 통해 433MHz 무선 소켓을 제어합니다. 이 10 초의 ajax-refresh의 목적은 버튼을 전기 소켓의 실제 상태 (MySQL 데이터베이스에 저장 됨)와 동기화시키는 것입니다.

---

$stmt = $dbh->query("SELECT * FROM `funksteckdosen`"); 
$row = $stmt->fetchAll(PDO::FETCH_ASSOC); 
foreach($row as $r) 
{ 
    echo "<tr>"; 
    echo " <td>" . $r['name'] . "</td>"; 
    echo " <td><button id='" . $r['id'] . "' class='toggle" . ($r['toggle'] == 0 ? "" : " ein") . "'>"  
    . ($r['toggle'] == 0 ? "aus" : " ein") . "</button></td>"; 
    echo "</tr>"; 
} 

$(document).ready(function(){ 
    $(".toggle").click(function() { 
    if($(this).hasClass("ein")) { 
     $(this).removeClass("ein"); 
     $(this).html("aus"); 
     $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'0'}, function(result) { 
     }); 
    } else { 
     $(this).addClass("ein"); 
     $(this).html("ein"); 
     $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'1'}, function(result) { 
     }); 
    } 
    }); 
}); 


window.setInterval("reloadPage()", 5000); 
function reloadPage() 
    { 
    $.get('various/reloadPage.php', function(data) { 
     $("#content").html(data); 
    }); 
} 

지금 나는 다음과 같은 문제가있다 : 페이지가 AJAX에 의해 처음으로 갱신됩니다 즉시로, 버튼의 작동이 중지. Javascript는 더 이상 click() - 함수를 실행하지 않습니다. 왜 그런가요? 문제 2 : 테이블 내용이 삭제되고 새 내용으로 바뀝니다. 어떻게 든 새 라인을 페이드 (또는 버튼 배경 - 컬러) 할 수 있습니까? 그것은 마지막 접촉 일 것입니다.

설명해 주시면 감사하겠습니다.

Answer 1

새 버튼에 핸들러가 연결되지 않았기 때문에 클릭 핸들러가 더 이상 작동하지 않습니다. 이 같은 핸들러를 연결하면 : jQuery를이 무엇

$(".toggle").click(function() { 

각 하나에 대한 현재 기존.toggle 모든 요소와, 찾을 핸들러로 해당 기능을 추가 할 수 있습니다. 새로운 함수는 나중에 AJAX 호출을 통해 추가되므로 해당 함수는 해당 집합에 포함되지 않으므로 함수가 추가되지 않습니다.

jQuery의 주소는 the .on() function입니다. 사용 구조는 매우 유사합니다.

$('body').on('.toggle', 'click', function() { 

차이점은 실제로 click 이벤트가 함수에 바인드되는 요소입니다. 이를 통해 click 이벤트는 실제로 AJAX 호출에서 변경되지 않는 body 태그에 추가됩니다. 동적 요소에 대해 변하지 않는 공통 부모가 작동합니다. 'body' 및 document은 보통 최상위 수준이므로 일반적으로 기본값으로 사용됩니다.

자식 요소가 클릭 이벤트를 발생 시키면 해당 이벤트는 모든 부모 요소까지 계속됩니다. 따라서 결국 부모가됩니다 (예 : 'body'). .on() 함수에는 첫 번째 인수로 두 번째 선택자가 있습니다. 해당 선택기는 함수를 호출하기 전에 click 이벤트의 원래 요소를 필터링합니다.

는 이 방법을 사용

장점 은 다음과 같습니다

• 크거나 복잡한에 성능이 향상 될 수있는 대신에 많은 요소에 부착 많은, 하나의 공통의 부모에 부착 만 하나 개 이벤트 핸들러 함수있다 페이지.
• 페이지 수명 이후에 공통 상위 요소에 추가 된 하위 요소는 추가 된시기와 관계없이 부모에게 계속해서 클릭 이벤트를 보내기 때문에 계속 처리됩니다. (이것은 귀하의 상황에서 즉각적인 이점입니다.)

콘텐츠가 희미 해지면 달성하고자하는 효과를 이해하면 이미 존재하는 것을 제거하고 제거하고, .이 같은에서 그것을 퇴색하고 새 콘텐츠를 추가하고, 아마 뭔가 :

$.get('various/reloadPage.php', function(data) { 
    $('#content').fadeOut(400, function() { 
     $("#content").html(data); 
     $('#content').fadeIn(); 
    }); 
}); 

새로운 상대적으로 새로운 "약속"모델로이 같은 일을 수행하는 구조지만, 기본적으로이가하는 무엇을 페이드 인이있을 수 있습니다 내용을 출력하고 페이드 아웃이 끝나면 전화 할 콜백 기능을 포함합니다. 콜백 함수는 HTML을 대체 한 다음 다시 페이드 인합니다. HTML의 구조에 따라 대상 요소 대신 부모 요소를 페이드 아웃해야 할 수도 있지만, 여기에서 아이디어를 얻으시기 바랍니다. 제대로 될 때까지 조정할 수 있습니다.

Answer 2

문제 1 : 클릭 이벤트 처리기는 초기 토글 클래스 요소에 바인딩되지만 동적으로 생성 된 이벤트는 바인딩되지 않습니다.

동적으로 생성 된 요소를 바인딩하려면 live() 또는 on()을 사용해보십시오. 참조 : Event binding on dynamically created elements?

문제 2 : #content를 교체 할 때 기존 요소에 데이터를 추가 할 수 append()를 사용해보십시오 html()

를 사용하는 경우. html()을 사용하면 요소의 내용이 바뀝니다.

저는 hide()과 fadeIn()을 연결하여 추가 애니메이션을 만들었습니다. 당신이 # 2 당신이 당신의 쿼리를 조정해야 할 것, jQuery의 [CSTE 연구진를() (http://api.jquery.com/on/) 조회, 이벤트 위임을 필요 # 1

$('#content').append(data).hide().fadeIn(1000);