wordpress jQuery ajax加载不需要的重复帖子

I will try to explain the best I can. Basically I have a grid (masonry) of items and I want to append ajax loaded content (wordpress single.php post) inside each grid div (red).

我会尽力解释我能做的最好的事情。基本上我有一个网格(砖石)的项目,我想在每个网格div(红色)内附加ajax加载的内容(wordpress single.php post)。

I have a div class called ajaxcontainer inside each red div that I populate with content. When I click the a href trigger content gets appended as it should, this works once but when I click another item in the grid the old ajaxcontainer gets populated with new content from that href. Basically duplicating.

我在每个红色div中都有一个名为ajaxcontainer的div类,我用内容填充。当我单击一个href触发器内容时,它应该按原样附加,但是当我单击网格中的另一个项目时,旧的ajaxcontainer将从该href填充新内容。基本上重复。

I want the old ajaxcontainer to keep the old content even though I click another item.

即使我点击另一个项目,我希望旧的ajaxcontainer保留旧内容。

wordpress jQuery ajax加载不需要的重复帖子 HTML

<article style="background:<?php echo $color ?>;" id="post-<?php the_ID(); ?>" 
<?php post_class($classes); ?>>


<div class="hover">
<h2><?php echo $head ?></h2>
<p class="tags"><?php echo $tagsstring; ?></p>

<a href="//<?php echo $url ?>"><?php echo $url ?></a>
<a class="trick" rel="<?php the_permalink(); ?>" href="<?php the_permalink();?>">goto</a>
</div>

<div class="thumbnail <?php echo $paddingstring?>" style="background-image:url(<?php echo $thumbnail[0] ?>);">

</div>


</article><!-- #post-## -->

What I have right now:

我现在拥有的:

   $.ajaxSetup({
       cache: false,
       success: function (result, status, xhr) {
           // not showing the alert
           console.log('success');
           var $this = jQuery(this)
           $('.ajaxcontainer', $this).hide().fadeIn();
       },
       beforeSend: function () {
           console.log('beforesend');
           $(".ajaxcontainer").html("loading...");


       },
       complete: function (xhr, stat) {
           // hide dialog // works

       }
   });
   $(".trick").each(function () {
       $(this).on("click", function (e) {
           $(this).parents('.item').append("<div class='ajaxcontainer'>hello world</div>")

           var post_link = $(this).attr("href");
           $(".ajaxcontainer").load(post_link + ' #content');
           return false;
       });
   });

Any help is appreciated :)

任何帮助表示赞赏:)

1 个解决方案

#1

I maybe wrong, but from what I see, if you have duplicated content, next() could help.

我可能错了,但从我看到的情况来看,如果你有重复的内容,next()可以提供帮助。

Something like $(this).parents('.item').next().append("hello world") in the function.

类似$(this).parents('。item')。next()。append(“hello world”)在函数中。

#1