One click only

by ChrisStanyon

HTML

<div class="row">
	<div data-choice="clicker1">Clicker 1</div>
	<div data-choice="clicker2">Clicker 2</div>
	<div data-choice="clicker3">Clicker 3</div>
</div>

<div class="row">
	<div data-choice="clicker4">Clicker 4</div>
	<div data-choice="clicker5">Clicker 5</div>
	<div data-choice="clicker6">Clicker 6</div>
</div>

<div id="response"></div>

CSS

.row { width: 315px; height: 70px; border: 1px solid green; padding:10px;margin-bottom:10px; }
.row div { width: 65px; height: 30px; border: 1px solid red; padding: 9px; text-align:center; float:left; margin: 10px; cursor:pointer;   }
.row div.active { background-color:green; }

JavaScript

$(".row").one("click", "div", function() {
	var choice = $(this).data('choice');
	$(this).addClass('active');
    $('#response').html(choice);
});