Question

我有以下代码，根据相应的数字过滤/显示某些div。例如，单击“onestar”链接将仅在类名中显示带有“onestar”的div。首次加载页面时，此工作正常。但是假设我在JQuery中通过post请求一些新的标记，链接过滤器停止工作。出于某种原因，当JQuery Ajax检索到新标记时，过滤器停止工作。感谢

这是执行js过滤的代码

$('#filtero-stars li a').click(function(){
   $('#filtero-stars li').removeClass('active');
   $(this).parent().addClass('active');
   var colorClass = '.' + $(this).attr('class');
   if(colorClass=='.all') {
    $('#nothing_found').remove();
    $wall.children('.invis').toggleClass('invis').fadeIn(500);
   } else {  
    if ($wall.children(colorClass).length == 0) {
     $('#demo .wrap').append(getNothingFound()).fadeIn(500);
     setTimeout(function(){$('#nothing_found').show();},600);
    } else $('#nothing_found').remove();
    $wall.children().not(colorClass).not('.invis').toggleClass('invis').fadeOut(500);
    $wall.children(colorClass+'.invis').toggleClass('invis').fadeIn(500);
   }
});

这是过滤器的HTML标记

<ul class="star-rating" id="filter0-stars">
  <li><a href="#onestar" class="onestar">
    <div class="one"></div>
    <span>1 Star</span></a></li>
  <li><a href="#twostar" class="twostar">
    <div class="two"></div>
    <span>2 Stars</span></a></li>
  <li><a href="#threestar" class="threestar">
    <div class="three"></div>
    <span>3 Stars</span></a></li>
  <li><a href="#fourstar" class="fourstar">
    <div class="four"></div>
    <span>4 Stars</span></a></li>
  <li><a href="#fivestar" class="fivestar">
    <div class="five"></div>
    <span>5 Stars</span></a></li>
  <li><a class="all" href="#">Show all</a></li>
</ul>

这是过滤的内容

<div id="demo">
  <div class="box threestar">
  <div class="box twostar">
  <div class="box onestar">
</div>

这是检索新标记的代码，之后过滤器不起作用 $.post('get-offers.php', $("#offerForm").serialize(), function(data) {

$('#demo').html(data);

Answer 1

替换内容时，这些对象上的所有事件处理程序都将消失。它们附加到先前HTML中的特定元素。当您替换该HTML时，事件处理程序将不在新的DOM元素上。

您可以在jQuery中使用委派事件处理将事件处理程序附加到不会被替换的常量父对象。

如果停止工作的事件处理程序是你所包含的代码中的那个（我无法确定你所包含的部分HTML / JS），那么你可以通过改变它来做到这一点： / p>

$('#filtero-stars li a').click(function(){

到此：

$(document).on('click', '#filtero-stars li a', function(){

理想情况下，您不会将此事件处理程序附加到document对象，而是附加到更接近实际对象的父级，父级在加载新HTML时不会更改（因此事件处理程序不会被删除）。但是，由于您没有包含足够的HTML，我不知道建议将其挂钩的父母。

P.S。 jQuery 1.7中添加了.on()。对于早期版本，您希望使用.delegate()执行类似的操作（尽管参数的顺序略有不同）。

有关.on()如何运作的文档，请参阅here。

在jquery中加载每个div延迟

1 个答案: