执行后如何刷新 jQuery 选择器值？

Question

$(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');
    { ........... }

});

我最初将'selectee' 类注入到所有具有“chess_piece”类的 div，然后我选择具有该类$('.chess_square.selectee') 的 DIV。

<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”，它们并不意味着可点击。我将“rps_square selectee”的子 DIV 从 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 UI selectable 但也不刷新。

Answer 1

像这样使用.live()，而不是.bind()：

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

并不是说 jQuery 没有更新集合，尽管它不是。这是您已经将事件处理程序绑定到匹配的 DOM 元素。

使用 .live() 在 DOM 根目录上侦听 click 并在它匹配选择器时执行...如果类更改，它将不再匹配选择器，并且处理程序将不会执行，这是你所追求的。反过来也是如此，如果有任何新的匹配选择器，当它是 click 气泡时，处理程序将为它执行。