DIVs as buttons with AJAX Class

by ChrisStanyon

HTML

<div class="button" data-number="1">1</div>
<div class="button" data-number="2">2</div>
<div class="button" data-number="3">3</div>
<div class="button" data-number="4">4</div>
<div class="button" data-number="5">5</div>
<div class="button" data-number="6">6</div>
<div class="button" data-number="7">7</div>
<div class="button" data-number="8">8</div>
<div class="button" data-number="9">9</div>

<pre id="response"></pre>

CSS

.button { width: 50px; height: 50px; border: 1px solid green; margin: 5px; float:left; }
pre { clear:both; border: 1px solid red; padding:10px; margin:5px; width: 300px; }

JavaScript

$('.button').click(function() { 
    $.ajax({
        type: "POST",
        data: {'html':$(this).data('number')},
        url: "/echo/html/",
        success: function(msg){
            $('#response').html(msg);
        }
    });
});