jquery - 如何在执行后刷新 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' 类注入(inject)到所有具有 'chess_piece' 类的 div，然后选择具有该类的 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”，后者并不意味着可单击。我将“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 可选择，但也不刷新。

Answer 1

使用.live()代替.bind()像这样:

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

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

使用.live()在 DOM 根监听 click 并在它与选择器匹配时执行...如果类发生更改，它将不再与选择器匹配，并且处理程序将不会执行，这就是你在追赶。反之亦然，如果有任何新内容与选择器匹配，当它的点击冒泡时，处理程序将为其执行。