Как обновить значение селектора jQuery после выполнения?

Question

$ (документ) .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');
    { ........... }

});

Я изначально внедряю класс 'selectee' во все div, которые имеют класс 'chess_piece', затем я выбираю DIV с этим классом $('.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>

Существует два типа элементов DIV с классами с именем 'chess_square selectee' и 'chess_square', которые не предназначены для нажатия. Я перемещаю Sub DIV 'rps_square selectee' из DIV2 в DIV1 и добавляю и удаляю классы, чтобы они были точно такими же. Смысл в том, что Queen Piece перемещен из Div2 в 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>

Однако проблема в том, что jQuery не обновляет var $selectee = $('.rps_square.selectee');. Несмотря на то, что я изменил имена классов, DIV1 не активен, а DIV2 активен. Кстати, я использовал выбираемый пользовательский интерфейс jQuery, но тоже не обновлялся.

Answer 1

Вместо .bind() используйте .live(), например:

$('.chess_square.selectee').live('click',function(){
    $('.chess_square.selected').removeClass('selected');
    $(this).addClass('selected');
    { ........... }    
});

Дело не в том, что jQuery не обновляет коллекцию, хотя это не так. Вы уже связали обработчик событий с соответствующими элементами DOM.

Использование .live() прослушивает корень DOM для click и выполняется, если он соответствует селектору ... если класс изменился, он больше не будет соответствовать селектору и обработчику не выполнится, а это то, что вам нужно. Обратное также верно, если что-то новое соответствует селектору, когда он click всплывает, обработчик для него выполнится.