DOMが変化するとイベントバインドが無効になります

3359 ワード
JavaScript fileコントロール jQueryイベントバインド イベントバインドの無効化
フロントエンドは常にいくつかのクリックイベントを処理したり、ユーザーが保存したりするときに、いくつかのチェックをしたりします.この場合、私たちはよくいくつかのイベントをバインドします.
click、changeなど.もちろんこれは私たちがよく使う機能です.
いくつかの場合、私たちのページはいくつかの変更に関連する可能性があります.例えば、ボタンをクリックすると、ページに新しい内容を挿入します.
私たちはこのコンテンツに対してイベントをバインドしたことがありますが、新しく挿入したコンテンツはイベントをバインドしますか?残念ですが、ありません.私たちはいつもページに追加していますから.
OKをロードするとイベントがバインドされますが、この場合、この新しい内容はページに挿入されません.次のようになります.
<!doctype html>
<html lang="en">
	<head>
	<!--      ，UTF-8     ，GBK  gb2312     -->
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="Keywords" content="    ，    ">
		<meta name="Description" content="      ">
		<meta name="Author" content="Yvette Lau">
		<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">		
		<title>CSSDemo</title>
		<!--css js      -->
		<!-- <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/> -->
	</head>
	<body>
		<div id = "content">
			<input type="file" />
		</div>
		<div>
			<input type="button" value="  ">
		</div>
	</body>
	<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</html>

現在のページにはfileコントロールのほかにbuttonボタンがあります.以下はJSの内容です.JSではfileコントロールにchangeイベントをバインドしています.
buttonボタンをクリックすると、fileコントロールがページに挿入されます.
<script type="text/javascript">
	
	$(function(){
		$('input[type ="file"]').change(function(){
			console.log($(this).val() )
			if($(this).val() == ""){
				alert("  ")
			}
		})	

		$('input[type ="button"]').click(function(){
			$("#content").append('<input type="file"/>')
		})
	})

</script>

テストにより,1番目のfileはchange時にイベントをトリガすることができ,2番目に挿入されたfileにはchangeイベントはないことが分かった.この質問に対して
問題は、次の2つの解決方法があります.
1つ目は、バインドchangeイベントを関数にカプセル化し、buttonボタンをクリックしてfileコントロールを挿入した後、この関数を呼び出すことです.次のようになります.
<script type="text/javascript">	
	$(function(){
		function fileChange(){
			$('input[type ="file"]').change(function(){
				console.log($(this).val())
				if($(this).val() == ""){
					alert("  ")
				}
			})
		}
		fileChange();
		$('input[type ="button"]').click(function(){
			$("#content").append('<input type="file"/>');
			fileChange();
		})
	})
</script>

もう1つの方法は、DOMロード後にDOMコンテンツが変更された場合、fileコントロールをバインドするchangeイベントです.以下のようにします.
<script type="text/javascript">
	
	window.onload,window.onchange = function(){
		$('input[type ="file"]').change(function(){
			console.log($(this).val() )
			if($(this).val() == ""){
				alert("  ")
			}
		})
	}
	
	$('input[type ="button"]').click(function(){
		$("#content").append('<input type="file"/>')
	})
	
</script>
両方式ともこの問題を解決することができ、どのような方式を使うかは個人の好みにかかっている.
(訳)他のライブラリ(jQueryプラグイン、Backbone)とともにReactを使用
input fileドメインのvalueクリアとデフォルト値付与メソッド、およびJqueryでfileのchangeイベントは一度しか実行できない、複数回実行できない解決策