calamarico · December 11, 2015 10:10
diff --git a/index.html b/index.html
 <html>
 <head>
 </head>
 <style>
  body, input[type=submit] {
    font-size: 20px;
    font-family: Verdana;
  }

  input[type=submit] {
    display: block;
    margin: 5px 20px;
    background-color: #FA0;
    width: 250px;
  }

  input[type=submit]:nth-child(odd) {
    background-color: green;
  }

  #layer {
    background-color: #AAA;
    width: 70%;
    min-height: 400px;
    margin: 0 auto;
    overflow: hidden;
  }

  #sublayer, #messages {
    float: left;
    background-color: #AAA;
  }

  h1 {
    margin: 20px;
  }
 </style>
 <body>
  <div id="layer" onclick="_clickLayer()">
    <div id="sublayer" onclick="_clickSubLayer()">
      <h1>Persons</h1>
      <form id="form">
      </form>
    </div>
    <div id="messages">
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  var json = JSON.stringify([
    {'id': 0, 'name': 'John Doe'},
    {'id': 100, 'name': 'Martin Sheen'},
    {'id': 87987, 'name': 'Louis Door'},
    {'id': 211, 'name': 'Jerome Fernandez'},
  ]);

  function _loadFromDataSource() {
    return JSON.parse(json);
  }

  function _appendMsg(msg) {
    $('#messages').append('<p>' + msg + '</p>');
    window.event.stopPropagation();
  }

  function _onclick(id, name) {
    _appendMsg('This is the input ' +
      id +
      '. My name is ' +
      name);
  }

  function _clickLayer() {
    _appendMsg('This is the layer');
  }

  function _clickSubLayer() {
    _appendMsg('This is the sublayer');
  }

  $(document).ready(function() {
    var persons = _loadFromDataSource(),
      i;


    // Create DOM input[type=submit]
    for (i = 0; i < persons.length; i++) {
     $('#form').append('<input type="submit" id="' +
      persons[i].id +
      '" value="' +
      persons[i].name +
      '" onclick="_onclick(' + persons[i].id + ",'" + persons[i].name + "')" +
      '"/>');
    }

    $('#form').submit(function () { 
      return false; 
    });
  });
  </script>
 </body>
 </html>
	<html>
	<head>
	</head>
	<style>
	body, input[type=submit] {
	font-size: 20px;
	font-family: Verdana;
	}

	input[type=submit] {
	display: block;
	margin: 5px 20px;
	background-color: #FA0;
	width: 250px;
	}

	input[type=submit]:nth-child(odd) {
	background-color: green;
	}

	#layer {
	background-color: #AAA;
	width: 70%;
	min-height: 400px;
	margin: 0 auto;
	overflow: hidden;
	}

	#sublayer, #messages {
	float: left;
	background-color: #AAA;
	}

	h1 {
	margin: 20px;
	}
	</style>
	<body>
	<div id="layer" onclick="_clickLayer()">
	<div id="sublayer" onclick="_clickSubLayer()">
	<h1>Persons</h1>
	<form id="form">
	</form>
	</div>
	<div id="messages">
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	var json = JSON.stringify([
	{'id': 0, 'name': 'John Doe'},
	{'id': 100, 'name': 'Martin Sheen'},
	{'id': 87987, 'name': 'Louis Door'},
	{'id': 211, 'name': 'Jerome Fernandez'},
	]);

	function _loadFromDataSource() {
	return JSON.parse(json);
	}

	function _appendMsg(msg) {
	$('#messages').append('<p>' + msg + '</p>');
	window.event.stopPropagation();
	}

	function _onclick(id, name) {
	_appendMsg('This is the input ' +
	id +
	'. My name is ' +
	name);
	}

	function _clickLayer() {
	_appendMsg('This is the layer');
	}

	function _clickSubLayer() {
	_appendMsg('This is the sublayer');
	}

	$(document).ready(function() {
	var persons = _loadFromDataSource(),
	i;


	// Create DOM input[type=submit]
	for (i = 0; i < persons.length; i++) {
	$('#form').append('<input type="submit" id="' +
	persons[i].id +
	'" value="' +
	persons[i].name +
	'" onclick="_onclick(' + persons[i].id + ",'" + persons[i].name + "')" +
	'"/>');
	}

	$('#form').submit(function () {
	return false;
	});
	});
	</script>
	</body>
	</html>