문서가 로드될 때와 요소를 클릭할 때 JS 기능 실행

Question

저는 제가 사용하는 비즈니스 웹 애플리케이션을 확장하기 위해 Tampermonkey 스크립트를 작성하려고 합니다. 매우 기본적인 의미에서 일부 URL이 페이지에 나타나고 URL에서 숫자를 추출한 다음 해당 숫자를 사용하여 새 링크를 만들고 상위 요소에 추가해야 합니다.

지금까지 이것을 가지고 있지만 요소를 클릭하거나(페이지 매김은 단지 UL임) 문서가 로드될 때 작동하지 않습니다. 작동하는 문서의 아무 곳이나 클릭하면 기능이 실행되도록 설정한 것처럼 작동한다는 것을 알고 있습니다. JS가 페이지가 로드되었다고 보고하면 페이지가 아직 완전히 로드되지 않은 것과 거의 같습니다.

으아악

UL 요소는 다음과 같습니다.

으아악

위에서 말했듯이 문서의 아무 곳이나 클릭하면 실행되도록 설정하면 예상대로 기능이 작동합니다. 나를 더욱 혼란스럽게 만드는 것은 document.onload를 사용할 때 작동하지 않는다는 것입니다. 페이지와 상호작용을 시작한 후에만 페이지에서 데이터 로드를 시작하는 것과 같습니다. 페이지 매기기를 클릭할 때 함수를 실행하려고 하는 이유는 페이지가 모든 데이터를 가져와서 (내가 볼 수 없는) 어딘가에 저장한 것처럼 보이고 페이지 매기기를 클릭하면 페이지를 넘기기 때문입니다. 따라서 페이지 매김을 클릭하면 새 페이지에서 생성된 링크에 대해 함수를 실행해야 합니다.

문서 데이터가 로드된 후 document.onload 실행을 지연하거나 다른 방법으로 이해하고 UL 페이지 매김 요소를 클릭할 때 실행되지 않는 이유를 파악해야 할 것 같습니다.

Answer 1

페이지가 렌더링될 때까지 기다린 다음 모든 요소를 ​​반복하여 앵커 태그를 추가하는 대신. MutationObserver를 사용하여 논리를 실행한 후 렌더링되는 모든 요소를 ​​처리하면 됩니다.

JS

으아아아