동적으로 추가된 HTML 요소에 이벤트를 바인딩하는 방법

이 글에서는 주로 동적으로 추가된 html 요소에 대한 이벤트 바인딩 방법을 소개합니다. 이제 이를 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

DOM 작업을 먼저 작성하지 마세요. 하지만 요소는 동적입니다. 로드되었으므로 클릭이 적용되지 않습니다. 두 가지 더 나은 방법이 있습니다.

1. onclick="funcName()"

동적으로 추가할 때 인라인 이벤트를 추가하세요. js에서 메서드 이름에 해당하는 메서드를 작성하세요. 바인딩 방법에 요소가 너무 많으면 방법 2를 사용하는 것이 좋습니다.

2.jquery의 이벤트 바인딩

예:

on事件可以给动态添加的元素也绑定事件。
$("#optionGroup").on('click','.input-group .delete-option',function () {
    console.log("aaa")
    let num = $(this).parents(".input-group").index();
    console.log(num)
})

참고: on 이벤트는 먼저 상위 요소를 가져온 다음 이를 바인딩합니다. 하위 요소의 경우 상위 요소가 동적으로 추가되는 요소가 아닌 기존 요소인 것이 가장 좋습니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

웹 인쇄 기능

Vue+Electron은 간단한 데스크톱 애플리케이션을 구현합니다

위 내용은 동적으로 추가된 HTML 요소에 이벤트를 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!