jquery에서 동적으로 생성된 태그에 이벤트 바인딩(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery에서 동적으로 생성된 태그에 이벤트 바인딩(자세한 튜토리얼)

亚连

Jun 04, 2018 pm 05:29 PM

jquery 상표 제본

아래에서는 jquery를 사용하여 동적으로 생성된 태그에 이벤트를 바인딩하는 여러 가지 방법을 요약하여 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

동적으로 생성된 태그에 이벤트를 바인딩하는 것이 사용하기 쉽지 않다는 것을 자주 접하게 되는데, 간단하게 테스트해보고 정리해보니 결론은 다음과 같습니다.

	<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			生成a标签
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</p>
	</body>
	<script>
		
		$(function(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			$(&#39;li&#39;).bind(&#39;click&#39;, function(event) {
			 alert("haha"); ///根本不会触发这个方法
 			});
		})
	</script>

로그인 후 복사

버튼을 클릭하면 li 태그가 추가됩니다. d2로 할 수 있습니다.

그러나 초기화 중에 이렇게 하면 나중에 동적으로 생성될 li 태그를 바인딩하기 위해 바인딩 메서드를 사용하는 것은 유효하지 않습니다. 생성된 li 태그를 클릭해도 아무런 반응이 발생하지 않습니다.

바인드 메소드는 실행 시 이미 존재하는 정적 태그 jq 객체에만 이벤트를 바인딩할 수 있으므로 향후 동적으로 추가되는 태그에는 유효하지 않습니다.

현재 이 문제를 해결하는 방법에는 여러 가지가 있습니다.

방법 1:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			动态生成a标签
		</p>
		
		<p id="d3">
			<input type="button" value="生成a标签" id="btn"/>
			
		</p>
	</body>
	<script>
		$(function() {
			///点击按钮，给d2动态添加标签
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("<li onclick=&#39;show()&#39;>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
			alert("哈哈");
		}
	</script>

로그인 후 복사

이 방법은 동적 접합 중에 트리거될 기본 js 이벤트를 접합하는 것입니다. 스크립트 태그의 이벤트 메소드. 이 메소드는 li의 클릭 이벤트를 트리거할 수 있습니다. 그러나 레이블 자체 정보를 인쇄하는 Alert($(this).text())를 사용하려는 경우 결과가 표시되지 않습니다. 라벨이 정적으로 인쇄되더라도 표시되지 않습니다.

이 문제를 해결하려면 다음 두 가지 방법을 사용할 수 있습니다.

방법 2:

	<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			生成a标签
		</p>
		
		<p id="d3">
			<input type="button" value="生成a标签" id="btn"/>
		</p>
	</body>
	<script>
		$(function(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2").bind(&#39;click&#39;, function() {
			  /* 显示标签的内容 */
			  alert($(this).text()); ///这种方式也可以正常打印出 hello
			 });
 			});
 			
		})
	</script>

로그인 후 복사

이 방법은 위의 문제를 해결할 수 있습니다. 바인딩 메소드를 사용하기도 하지만 먼저 대상 태그 객체를 갖고 그 후 바인드 메소드를 호출하므로 사용하기 쉽다는 점을 참고하세요. 그리고 실제로 자신의 정보를 정상적으로 인쇄할 수 있다는 것은 놀라운 일입니다.

방법 3:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d1">
			测试静态标签的绑定方法
		</p>
		<br />
		
		<p id="d2">
			动态生成a标签的位置
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</p>
	</body>
	<script>
		$(function(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function() {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			///用live方法才好用
 			$(&#39;li&#39;).live(&#39;click&#39;, function() {
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的
			 alert("haha");
 			});
 			
 			///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
 			$(&#39;#d1&#39;).live(&#39;click&#39;, function() {///对于静态和动态创建的标签都好使
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的.这是非常重要的
			 alert("haha");
 			});
		})
	</script>

로그인 후 복사

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7469

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

BTCC 튜토리얼: BTCC 교환에서 MetaMask 지갑을 바인딩하고 사용하는 방법은 무엇입니까? Apr 26, 2024 am 09:40 AM

MetaMask(중국어로 Little Fox Wallet이라고도 함)는 무료이며 호평을 받는 암호화 지갑 소프트웨어입니다. 현재 BTCC는 MetaMask 지갑에 대한 바인딩을 지원합니다. 바인딩 후 MetaMask 지갑을 사용하여 빠르게 로그인하고 가치를 저장하고 코인을 구매할 수 있으며 첫 바인딩에는 20 USDT 평가판 보너스도 받을 수 있습니다. BTCCMetaMask 지갑 튜토리얼에서는 MetaMask 등록 및 사용 방법, BTCC에서 Little Fox 지갑을 바인딩하고 사용하는 방법을 자세히 소개합니다. MetaMask 지갑이란 무엇입니까? 3천만 명 이상의 사용자를 보유한 MetaMask Little Fox Wallet은 오늘날 가장 인기 있는 암호화폐 지갑 중 하나입니다. 무료로 사용할 수 있으며 확장으로 네트워크에 설치할 수 있습니다.

Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 계정이 정상인지 어떻게 확인하나요? Mar 21, 2024 pm 10:11 PM

오늘날 정보 폭발 시대에 개인 브랜드와 기업 이미지 구축은 점점 더 중요해지고 있습니다. Xiaohongshu는 중국 최고의 패션 라이프 공유 플랫폼으로서 많은 사용자의 관심과 참여를 이끌어냈습니다. 자신의 영향력을 확대하고 콘텐츠 전파의 효율성을 높이려는 사용자에게 하위 계정 바인딩은 효과적인 수단이 되었습니다. 그렇다면 Xiaohongshu는 어떻게 하위 계정을 연결합니까? 계정이 정상인지 확인하는 방법은 무엇입니까? 이 기사에서는 이러한 질문에 대해 자세히 답변해 드립니다. 1. Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 1. 메인 계정에 로그인: 먼저 Xiaohongshu 메인 계정에 로그인해야 합니다. 2. 설정 메뉴를 엽니다. 오른쪽 상단 모서리에 있는 "나"를 클릭한 다음 "설정"을 선택합니다. 3. 계정 관리 입력: 설정 메뉴에서 "계정 관리" 또는 "계정 도우미" 옵션을 찾아 클릭하세요.

Toutiao에서 Douyin을 바인딩하는 단계 및 방법 Mar 22, 2024 pm 05:56 PM

1. 터우티아오를 엽니다. 2. 오른쪽 하단에 있는 내를 클릭하세요. 3. [시스템 설정]을 클릭하세요. 4. [계정 및 개인정보 설정]을 클릭하세요. 5. [두음] 오른쪽에 있는 버튼을 클릭하면 두음이 바인딩됩니다.

Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao Wrap을 Pinduoduo 플랫폼에 추가하는 방법은 무엇입니까? Mar 19, 2024 pm 02:30 PM

Cainiao 앱은 다양한 물류 정보를 제공할 수 있는 플랫폼입니다. 여기의 기능은 매우 강력하고 사용하기 쉽습니다. 물류 관련 문제가 있으면 여기에서 해결할 수 있습니다. -정지 서비스는 모든 것을 제 시간에 해결할 수 있습니다. 특급 배송 확인, 특급 배송 발송 등은 모두 문제없이 이루어지며 때로는 모든 정보를 쿼리할 수 있습니다. Pinduoduo에서 구매한 상품이 물류 정보를 표시할 수 없는 경우가 있습니다. 실제로 이를 달성하려면 구체적인 방법이 아래에 정리되어 있으며 누구나 확인할 수 있습니다. Cainiao를 Pinduoduo 계정에 연결하는 방법: 1. Cainiao 앱을 열고 메인 페이지로 이동합니다.

Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Mar 19, 2024 pm 05:16 PM

Cainiao Wrap을 사용할 때 Pinduoduo를 묶는 방법을 알고 계십니까? Cainiao Wrap 앱의 공식 버전은 이 플랫폼에서 일부 Pinduoduo의 물류 정보를 자동으로 동기화하지 않습니다. 주문 번호를 복사하거나 휴대폰에서 확인할 수 있습니다. 특급 배송 정보가 있는 경우. 물론, 이 모든 작업은 수동으로 완료해야 합니다. 자세한 내용을 알고 싶으면 와서 편집자와 함께 살펴보세요. Cainiao 앱을 Pinduoduo에 바인딩하는 방법 1. Cainiao 앱을 열고 메인 페이지 왼쪽 상단에 있는 "패키지 가이드"를 클릭합니다. 2. 인터페이스에는 다양한 쇼핑 웹사이트가 있으며, 계정을 묶을 수 있습니다. 3. 다른 전자상거래 플랫폼을 가져오려면 클릭하세요. 4. 사용자 인증: Pinduoduo를 클릭하여 인터페이스로 이동합니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

트래픽을 유도하기 위해 Douyin에 태그를 추가하는 방법은 무엇입니까? 플랫폼에서 트래픽을 가장 쉽게 유도할 수 있는 태그는 무엇입니까? Mar 22, 2024 am 10:28 AM

인기 있는 짧은 비디오 소셜 플랫폼인 Douyin은 엄청난 사용자 기반을 보유하고 있습니다. Douyin 창작자에게 태그를 사용하여 트래픽을 유도하는 것은 콘텐츠 노출을 늘리고 관심을 끄는 효과적인 방법입니다. 그렇다면 Douyin은 어떻게 태그를 사용하여 트래픽을 유도합니까? 이 기사에서는 이 질문에 대해 자세히 답변하고 관련 기술을 소개합니다. 1. Douyin에 태그를 추가하여 트래픽을 유도하는 방법은 무엇입니까? 동영상을 게시할 때 콘텐츠와 관련된 태그를 선택하세요. 이러한 태그는 사용자가 태그를 통해 동영상을 더 쉽게 찾을 수 있도록 동영상의 주제와 키워드를 포함해야 합니다. 인기 해시태그를 활용하는 것은 동영상 노출을 높이는 효과적인 방법입니다. 현재 인기 있는 태그와 트렌드를 조사하고 이를 동영상 설명과 태그에 통합하세요. 이러한 인기 태그는 일반적으로 가시성이 더 높으며 더 많은 시청자의 관심을 끌 수 있습니다. 3. 라벨

Xiaomi 자동차 앱을 충전 파일 장치에 바인딩하는 방법 Apr 01, 2024 pm 06:52 PM

샤오미에서 출시한 최신 Mi su7 모델 자동차가 각종 핫 검색어를 휩쓸고 있습니다. 우연히 자동차를 사고 싶어하는 많은 사용자들이 샤오미 su7 모델 자동차를 선택했습니다. 그렇다면 샤오미 자동차 앱을 사용하여 자동차를 묶는 방법은 무엇입니까? 충전을 위해 가정용 충전 파일을 사용하기로 결정했다면 이 튜토리얼 가이드가 자세한 소개를 제공할 것입니다. 도움이 되기를 바랍니다. 먼저 Xiaomi 모바일 앱을 열고 오른쪽 하단에 있는 My 버튼을 클릭한 다음 My 인터페이스에서 충전 파일을 묶는 페이지에 들어간 후 스캔 코드를 클릭합니다. 아래 버튼을 누르고 충전 파일의 QR 코드를 스캔하면 QR 코드를 사용하여 충전 파일을 앱에 연결할 수 있습니다.

See all articles

jquery에서 동적으로 생성된 태그에 이벤트 바인딩(자세한 튜토리얼)

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제