How to refresh jQuery Selector Value after an execution?
- by Devyn
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.
