I think you're looking for jQuery's on and off methods.
Bind a click handler with on
, and then turn it off
when you're done with it. So, in your case, you can turn a click handler off immediately after it's been triggered. For example:
$(document).ready(function () {
var $tds = $('td'), // store td's
count = $tds.length; // store # of td's
$("button[name=start]").on('click', function (e) {
// pass `e` so that it can be used to turn itself off
$(this).off(e); // this function won't execute again
// bind td clicking after button's clicked
$tds.on('click', function (e) {
$(this).addClass('clicked').off(e); // executed once per td
// the if statement and the count is actually
// not necessary; it's just to demonstrate
// that all the click handlers have ended.
count--; // count - 1
if (count === 0) {
console.log('there are no more click handlers');
}
});
});
});
Or simply
$(document).ready(function () {
$("button[name=start]").on('click', function (e) {
$(this).off(e);
$('td').on('click', function (e) {
$(this).addClass('clicked').off(e);
});
});
});
Check out the code on your jsfiddle.