在jquery中加载每个div

-1

我有以下代码，它根据其相应的数字过滤/显示某些div。例如，单击“onestar”链接将只在类名中显示带有“onestar”的div。这在第一次加载页面时工作正常。但是，假设我通过在JQuery中发布了一些新的标记，链接过滤器停止工作。出于某种原因，当由JQuery Ajax检索新标记时，过滤器停止工作。感谢在jquery中加载每个div

这是做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);

来源

2012-02-04 user1038814

请在代码段中的每个新行之前用4个空格正确格式化您的代码。 – thenetimp 2012-02-04 18:56:12

可能重复？ - http://stackoverflow.com/questions/6892755/load-div-then-delay-load-next-in-jquery – apnerve 2012-02-04 19:01:51

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

您可以使用委派事件的jQuery处理您的事件处理程序附加到没有得到被替换恒定的父对象。

如果停止工作的事件处理程序是一个在你已经包括了代码（我不能肯定从部分HTML告诉/ JS你在内），那么你可以做的是通过改变这样的：

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

这样：

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

理想情况下，你就不会对此事件处理函数附加到document对象，而是在父母更接近实际的对象，那并不是一个父在加载新的HTML时不会改变（所以事件处理程序不会被删除）。但是，由于您没有包含足够的HTML，因此我不知道建议将哪个父级连接到该父级。

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

见here的文档了解如何.on()作品。

来源

2012-02-04 19:16:17 jfriend00

在jquery中加载每个div

回答

相关问题