ababup1192 · August 23, 2017 06:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <!--[if lt IE 9]>
                    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
                    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
                    <![endif]-->
  <link rel="shortcut icon" href="">
 </head>

 <body>
  <input id="clone_btn" value="clone" type="button"></input>

  <!--  新しく作られるボタンのテンプレート。display: none; で、隠しておく。 -->
  <div class="btn_template" style="display: none;">
      <input class="cloned_btn" value="click here!" type="button"></div>
  </div>

  <div class="new_btns"></div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="./main.js"></script>
 </body>
diff --git a/main.js b/main.js
 var counter = 0;

 $("#clone_btn").click(function(){
  // div.btn_template から .cloned_btnをクローン。
 $clone_btn = $(".btn_template .cloned_btn").clone();
 // 新しいクラス名を設定する。
 var newClass = "new_btn_" + counter;
 $clone_btn.addClass(newClass);

 // ボタンが作られた(追加された)タイミングで、クリックイベントを設定する。
 $clone_btn.click(function(){
  // ボタン(クラス)によって、振る舞いが異なる。
  // 今回の場合は、couter変数により名前が変わっていく。
  alert(newClass);
 });

 counter++;

 // div.new_btns に ボタンを追加
 $clone_btn.appendTo(".new_btns");
 });

 /*
 この時点では、ボタン(DOM)が作られていない為、
 新しいボタンに対するクリックイベントは設定出来ない。

 $clone_btn.click(function(){
  alert("hogehoge");
 });
 */
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="">
	<!--[if lt IE 9]>
	<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<link rel="shortcut icon" href="">
	</head>

	<body>
	<input id="clone_btn" value="clone" type="button"></input>

	<!-- 新しく作られるボタンのテンプレート。display: none; で、隠しておく。 -->
	<div class="btn_template" style="display: none;">
	<input class="cloned_btn" value="click here!" type="button"></div>
	</div>

	<div class="new_btns"></div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script src="./main.js"></script>
	</body>
	var counter = 0;

	$("#clone_btn").click(function(){
	// div.btn_template から .cloned_btnをクローン。
	$clone_btn = $(".btn_template .cloned_btn").clone();
	// 新しいクラス名を設定する。
	var newClass = "new_btn_" + counter;
	$clone_btn.addClass(newClass);

	// ボタンが作られた(追加された)タイミングで、クリックイベントを設定する。
	$clone_btn.click(function(){
	// ボタン(クラス)によって、振る舞いが異なる。
	// 今回の場合は、couter変数により名前が変わっていく。
	alert(newClass);
	});

	counter++;

	// div.new_btns にボタンを追加
	$clone_btn.appendTo(".new_btns");
	});

	/*
	この時点では、ボタン(DOM)が作られていない為、
	新しいボタンに対するクリックイベントは設定出来ない。

	$clone_btn.click(function(){
	alert("hogehoge");
	});
	*/