jquery 새 요소 이벤트 바인딩 문제solution_jquery
js의 이벤트 모니터링은 CSS의 이벤트 모니터링과 다릅니다. CSS의 스타일만 설정되어 있으면 기존이든 새로 추가하든 동일한 성능을 발휘합니다. 그러나 이벤트 수신은 그렇지 않습니다. 이벤트를 각 요소에 개별적으로 바인딩해야 합니다.
일반적인 예는 테이블을 처리할 때입니다. 각 줄 끝에 삭제 버튼이 있습니다. 이 줄을 삭제하려면 이 버튼을 클릭하세요.
tbody>
;/버튼>
보통은 이렇게 바인딩합니다
코드 복사
모든 것이 domready 이전에 존재했던 삭제 버튼에 완벽하게 작동합니다. 그러나 domready 이후에 js를 사용하여 몇 줄을 동적으로 추가하면 새로 추가된 줄의 버튼은 효과를 잃게 됩니다.
이 문제를 어떻게 해결하나요? 아래 4가지 해결 방법이 제공됩니다.
구조와 동작의 분리 원칙을 무시하면 대개 이렇게 됩니다.
이때 deltr 함수는 전역 함수여야 하며 jQuery(function($) {}) 외부에 배치해야 합니다. 내부에 배치하면 로컬 함수가 되며 html에서 onclick을 호출할 수 없습니다!
코드 복사
jQuery(function($){ //행 추가$("#add2").click( function( ){
})
})
//행을 삭제하는 함수는 domready 함수 외부에 배치되어야 합니다
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};
해결 방법 1 - 반복 바인딩 공식
은 domready가 있을 때 기존 요소에 이벤트 핸들러를 바인딩하고, 을 새로 추가한 요소가 추가되면 다시 바인딩하는 것입니다.
코드 복사
jQuery(function($){ //삭제 버튼 이벤트 바인딩 정의//오염 방지를 위해 내부에 작성 전역 네임스페이스
$(this).parents("tr").remove()
}//바인딩하기 위해 이미 초기화된 삭제 버튼이 있습니다. 이벤트 삭제
$( "#table3 .del").click(deltr)
//행 추가
$("#add3").click(function(){
$('
// 여기서 삭제 버튼이 다시 이벤트에 바인딩됩니다.
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody")); >});
});
해결책 2 - 이벤트 버블링 방법
이벤트 버블링의 원리를 사용하여 조상에게 이 버튼 바인딩 이벤트 핸들러 함수의 요소입니다.
그런 다음 event.target 개체를 사용하여 이 이벤트가 우리가 찾고 있는 개체에 의해 트리거되었는지 확인합니다.
일반적으로 event.target.className, event.target.tagName 등과 같은 일부 DOM 속성을 사용하여 판단할 수 있습니다.
코드 복사
코드는 다음과 같습니다.
jQuery(function($){
//넷째 삭제 테이블의 버튼 이벤트 바인딩
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e. target) .parents("tr").remove();
};
})
//네 번째 테이블의 버튼 이벤트 바인딩 추가
$("#add4") .click(function (){
$("#table4>tbody").append('')
})
})
3번 해결 방법 - 이벤트 복사 방법
위의 솔루션은 jQuery 라이브러리를 사용하지 않더라도 비교적 구현하기 쉽다고 할 수 있습니다. 하지만 이 솔루션은 jQuery에 더 많이 의존합니다. 그리고 jQuery 버전 1.2 이상이 필요합니다. 낮은 버전의 jQuery에는 플러그인이 필요합니다.
위 두 가지 솔루션 모두 삭제 기능에 많은 고민을 했고, 트리거링과 바인딩 방식을 다양하게 변경했습니다. 이 솔루션은 일반적인 순수 정적 요소와 마찬가지로 DOM 준비 시간에 바인딩될 수 있습니다. 하지만 새 줄을 추가할 때 변경해 보겠습니다. 더 이상 위와 같이 문자열을 연결하여 새 줄을 추가하고 싶지 않습니다. 이번에는 DOM 요소를 복사해 보겠습니다. 그리고 복사할 때 바인딩된 이벤트와 함께 복사한 후 찾기 등을 사용하여 내부 요소를 수정합니다.
동시에 이 예와 같이 모든 요소를 삭제하려면 템플릿이 필요합니다. 삭제하지 않으면 템플릿을 사용할 필요가 없습니다. 실수로 삭제되는 것을 방지하기 위해 여기에 템플릿을 숨겼습니다.
jQuery에서 고유한 clone(true)을 사용했습니다
.template{display:none;}
;
(function($){
//다섯 번째 테이블의 버튼 이벤트 바인딩 삭제
$("#table5 .del").click(function() {
$(this) .parents("tr ").remove();
});
//다섯 번째 테이블의 버튼 이벤트 바인딩 추가
$("#add5").click(function(){
$("# table5>tbody>tr:eq(0)")
//이벤트와 함께 복사
.clone(true)
//템플릿 태그 제거
.removeClass( "template")
//내부 요소 수정
.find("td:eq(0)")
.text("새 행")
.end()
/ /테이블 삽입
.appendTo($("#table5>tbody"))
})
전체 의견:
위의 4가지 옵션에는 장점과 단점이 있습니다.
플랜 No. 0, 구조와 동작이 분리되지 않고 전역 네임스페이스를 오염시킵니다. 가장 권장되지 않습니다. 그래서 나는 그것을 계획이라고 생각하지도 않습니다. 하지만 js 초보자의 경우 긴급 프로젝트에 사용할 수 있습니다.
옵션 1, 아주 만족스럽습니다.
옵션 2, 이 방법은 js 이벤트 버블링의 장점을 최대한 활용합니다. 그리고 가장 효율적입니다. 그러나 동시에 이 솔루션은 jQuery의 강력한 선택기를 무시하기 때문에 관련된 요소 속성 요구 사항이 너무 많으면 더 문제가 될 것입니다. 당신은 많은 if 조건의 옳고 그름 관계 사이에서 헤매게 될 것입니다. 나중에 나는 jQuery에서 조건으로 $(event.target).is(selector)를 사용할 수 있다는 것을 기억했습니다. 이는 개발 효율성을 크게 향상시킬 수 있지만 실행 효율성은 약간 감소합니다.
플랜 3번, 구조와 행위의 분리 사상을 가장 잘 구현한 플랜이라고 생각합니다. 하지만 단점도 명확하다. jQuery에 대한 의존도가 너무 높다. 그렇지 않으면 이벤트를 함께 복사하는 함수를 작성해야 하는데, 이는 초보자에게는 분명히 매우 어렵다. 그러나 미래 동향의 관점에서 볼 때 이 솔루션은 여전히 적극 권장됩니다.
어떤 플랜을 선택할지는 정해져 있지 않습니다. 이는 프로젝트와 js 숙달도, 구조와 동작의 분리 아이디어에 따라 달라집니다. 가장 적합한 것이 가장 좋습니다.
추가:
계획 3을 완벽한 구조-행동 분리 스타일로 전환하세요.
우선 with template는 템플릿 요소입니다. 실수로 삭제되는 것을 방지하기 위해 모든 복사본의 원본이 표시되지 않도록 설정되어 있습니다. 조명이 제거되지 않는 경우에도 이 템플릿 요소는 선택 사항입니다. 반복을 위해 기존 요소를 복사할 수 있기 때문입니다.
두 번째로, 반복되는 각 요소에 반복을 추가하여 삭제 버튼을 사용하여 이 수준의 요소를 쉽게 찾을 수 있습니다. 이는 선택 사항이며 때로는 필수가 아닙니다.
마지막으로 수정하려는 각 요소에 클래스를 추가하여 find를 사용하여 찾을 수 있도록 합니다. 예를 들어 여기에 콘텐츠 클래스가 있고 새로 추가된 콘텐츠 클래스는 내부 값을 수정할 수 있습니다.
이렇게 하면 구조와 행위가 완벽하게 분리된 사례가 완성됩니다.
tr>
>
| 이 줄에는 원래 | |
| 새 행 | |
| 새 행 | |
| 새 행 추가 | |
| 템플릿은 다음과 같습니다 | |
| 이 줄은 원래 | |
| 이 줄에는 원래 | |
| 템플릿은 다음과 같습니다. | |
| 이 줄에는 원래 | |
| |
jQuery(function($){
//6번째 테이블의 버튼 이벤트 바인딩 삭제
$("#tbody6 .del" ).click(function() {
$(this).parents(".repeat").remove();
})
//6번째 테이블에 대한 버튼 이벤트 바인딩 추가
$("#add6") .click(function(){
$("#tbody6>.template")
//이벤트와 함께 복사
.clone(true)
/ /템플릿 태그 제거
. RemoveClass("템플릿")
//내부 요소 수정
.find(".content")
.text("새 줄")
.end ()
//테이블 삽입
.appendTo($("#tbody6"))
});
});
마찬가지로 이 js도 다음 html 구조에 적용 가능합니다
코드 복사
템플릿은 다음과 같습니다
< ;/li>
이 줄에는 원래
"del">삭제
핫 AI 도구
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7322
9
1625
14
1350
46
1262
25
1209
29
Jquery에서 이벤트를 바인딩하는 방법은 몇 가지입니까?
Nov 09, 2020 pm 03:30 PM
jquery에는 이벤트를 바인딩하는 방법이 4가지 있습니다. 즉, 바인딩(), live(), 대리자() 및 on() 메서드는 이벤트를 기존 요소에만 바인딩할 수 있는 반면, live() )는 on입니다. () 및 Delegate()는 모두 향후 새로 추가되는 요소에 대한 이벤트 바인딩을 지원합니다.
UniApp 오류 문제 해결: 'xxx' 이벤트가 바인딩되지 않았습니다.
Nov 25, 2023 am 10:56 AM
UniApp을 사용하여 애플리케이션을 개발할 때 'xxx' 이벤트가 바인딩되지 않음이라는 오류 메시지가 나타날 수 있습니다. 이는 UniApp의 이벤트 바인딩 메커니즘으로 인해 발생하며 이 문제를 해결하려면 올바르게 설정해야 합니다. 1. 문제 원인 UniApp에서는 v-on 명령어를 통해 페이지 구성 요소의 이벤트 바인딩이 완료됩니다. 예를 들어 템플릿에 버튼 구성 요소를 추가합니다. <button@click="onClick">나를 클릭하세요</butto
Vue 애플리케이션에서 '클릭' 이벤트 바인딩이 유효하지 않은 경우 어떻게 해야 합니까?
Jun 24, 2023 pm 03:51 PM
Vue는 최신 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue에서는 일반적으로 지시문을 사용하여 DOM 요소를 작동합니다. 그 중 "클릭" 이벤트는 일반적으로 사용되는 명령 중 하나입니다. 그러나 Vue 애플리케이션에서는 "클릭" 이벤트 바인딩이 유효하지 않은 상황에 자주 직면합니다. 이 문서에서는 이 문제를 해결하는 방법을 설명합니다. 요소가 존재하는지 확인하는 첫 번째 단계는 "클릭" 이벤트를 바인딩하려는 요소가 존재하는지 확인하는 것입니다. 해당 요소가 존재하지 않는 경우,
jQuery 이벤트 바인딩 기술에 대한 심층 토론
Feb 26, 2024 pm 07:36 PM
jQuery는 웹 페이지의 상호 작용을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 그 중 이벤트 바인딩은 jQuery의 중요한 기능 중 하나이며, 이를 통해 이벤트 바인딩을 통해 사용자 상호작용에 대한 응답을 실현할 수 있습니다. 이 기사에서는 jQuery 이벤트 바인딩 기술을 살펴보고 특정 코드 예제를 제공합니다. 1. 이벤트 바인딩의 기본 개념 이벤트 바인딩은 특정 이벤트가 발생했을 때 지정된 작업을 수행하기 위해 DOM 요소에 이벤트 리스너를 추가하는 것을 의미합니다. jQuery에서 원하는 것을 선택하십시오.
요소에 이벤트를 추가하는 방법은 무엇입니까? JS 바인딩 이벤트를 구문 분석하는 세 가지 방법
Aug 04, 2022 pm 07:27 PM
스크립팅 언어인 JavaScript는 이벤트를 페이지의 요소에 바인딩할 수 있으므로 지정된 이벤트가 발생하면 해당 이벤트 핸들러가 자동으로 호출되어 이벤트를 처리할 수 있습니다. 그렇다면 요소에 이벤트를 추가하는 방법은 무엇입니까? 다음 글에서는 JS에서 이벤트를 바인딩하는 세 가지 방법을 소개하겠습니다. 도움이 되길 바랍니다.
jQuery 이벤트 바인딩 기술에 대한 심층 분석
Feb 26, 2024 pm 06:33 PM
jQuery는 요소 선택, DOM 조작, 이벤트 처리 등 웹 개발의 많은 일반적인 작업을 단순화하는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 이벤트 바인딩은 매우 일반적이고 중요한 작업 중 하나입니다. 이 기사에서는 jQuery의 이벤트 바인딩 방법을 자세히 살펴보고 특정 코드 예제를 사용하여 독자가 이러한 방법을 더 잘 이해하고 적용할 수 있도록 돕습니다. 1.bind() 메소드 바인딩() 메소드는 가장 전통적이고 일반적으로 사용되는 이벤트 바인딩 메소드 중 하나입니다. 그것은 할 수 있다
Vue 문서에서 이벤트 바인딩 함수 매개변수를 사용하는 방법
Jun 20, 2023 pm 02:06 PM
Vue는 데이터 기반 아이디어를 사용하여 개발 프로세스를 단순화하는 인기 있는 JavaScript 프레임워크입니다. Vue의 이벤트 바인딩 기능은 매우 강력하며 페이지에서 다양한 상호 작용을 처리할 수 있습니다. Vue 개발 과정에서 이벤트 바인딩 함수 매개변수가 자주 사용됩니다. 이 기사에서는 이 함수의 사용법을 자세히 소개합니다. Vue에서는 v-on 지시문을 사용하여 이벤트를 바인딩할 수 있습니다. v-on 지시어 뒤에는 이벤트 이름과 이벤트 처리 기능이 옵니다. 예: <bu
jquery 바인딩 이벤트의 기능은 무엇입니까?
Mar 20, 2023 am 10:52 AM
jquery 바인딩 이벤트의 기능: 일반 이벤트를 DOM 노드에 바인딩합니다. DOM 노드가 선택되면 사용자가 해당 작업을 제공할 수 있도록 이벤트를 바인딩합니다. jQuery는 바인딩, 라이브, 위임 및 켜기라는 네 가지 이벤트 바인딩 방법을 제공하며 해당 비수신 기능은 바인딩 해제, 다이, 위임 취소 및 끄입니다.
