Ajax 호출 후 스크립트가 제대로 실행되지 않습니다.

Question

저는 WordPress에 나만의 포트폴리오 웹사이트를 구축하고 플러그인 없이 거의 모든 것을 코딩하고 있습니다. 웹사이트의 홈 페이지에는 동적 "사용자 정의 게시물 유형" 그리드가 제공되며 게시물 분류/카테고리를 기반으로 Ajax 필터를 구현하고 필터를 기반으로 게시물을 재정렬했습니다. 스크립트는 script.js에서 실행됩니다.

으아악

아래와 같이 커서를 따라가며 마우스를 올리면 게시물 제목을 표시하는 사용자 정의 툴팁도 구현했습니다. 이것은 홈 페이지 태그 사이에서 실행되는 PHP 파일입니다.

으아악

그리고 게시물 그리드에 대한 쿼리("animated-cursor" 클래스 및 data-cursor-title이 관련 속성임):

으아악

문제: Ajax 필터를 사용한 후 요소를 가리킬 때 사용자 정의 커서 도구 설명이 작동하지 않습니다. 페이지가 로드된 후 모든 것이 계획대로 잘 작동하지만 Ajax가 실행되는 경우는 전혀 없습니다.

제가 아는 한(저는 php, ajax, js 초보자입니다), 제 스크립트는 페이지가 로드될 때 준비된 요소에만 액세스할 수 있습니다. Ajax 호출 후 스크립트가 작동하도록 하려고 하는데 해결 방법을 찾을 수 없습니다. 누구든지 어떤 제안이 있습니까? 복잡하지 않을 거라 생각했어요.

감사합니다!

Answer 1

문제는 JavaScript가 첫 번째 렌더링에서 유효한 기존 DOM에 바인딩되어 있다는 것입니다. 그러나 ajax 호출 후에는 새 DOM이 HTML에 추가됩니다. 새 DOM에는 기능 바인딩이 없으므로 마우스 오버가 작동하지 않습니다.

해결책은 이벤트를 DOM 자체에 바인딩하지 않는 것입니다. 이벤트 리스너를 상위 주석이나 페이지 본문에 바인딩할 수 있습니다. 예를 들어

으아아아