Hi, I have like this.

$(document).ready(function() {

var $clickable_pieces = $('.chess_piece').parent();
$($clickable_pieces).addClass('selectee'); // add selectee class

var $selectee = $('.chess_square.selectee');

// wait for click 
$($selectee).bind('click',function(){
    $('.chess_square.selected').removeClass('selected');
    $(this).addClass('selected');
    { ........... }

});

I initially inject 'selectee' class to all div which has 'chess_piece' class then I select DIVs with that class $('.chess_square.selectee').

<div id="clickable">
    <div id="div1" class="chess_square">
    </div>

    <div id="div2" class="chess_square selectee">
          <div id="sub1" class="chess_piece queen"></div>
    </div>

    <div id="div3" class="chess_square">
    </div>

</div>

There are two type of DIV element with class named 'chess_square selectee' and 'chess_square' which doesn't meant to be clickable. I move around Sub DIV of 'rps_square selectee' from DIV2 to DIV1 and add and remove classes to be exactly same like this. The meaning is Queen Piece is moved from Div2 to Div1.

<div id="div1" class="chess_square selectee">
  <div id="sub1" class="chess_piece queen"></div>
</div>

<div id="div2" class="chess_square">
</div>

<div id="div3" class="chess_square">
</div>

However, the problem is jQuery doesn't update var $selectee = $('.rps_square.selectee');. Even though I changed class names, DIV1 is not clickable and DIV2 is still clickable. By the way, I've used jQuery UI selectable but doesn't refresh either.