Plugin

Developer
Supported

Infinite Scroll

ExpressionEngine 1.x, ExpressionEngine 2

Back to this add-on's main page
View Other Add-ons From Laisvunas

     

You must be logged in to post.

Jquery triggers no longer working when more entries are loaded

Support Request

ebiasini
ebiasini

I had no particular difficulties installing the module and make it work, but I’m now facing some difficulties when new entries are loaded. I have a link on each entry that should fire a jquery function when triggered. It’s no longer working but I get no console warnings.

Here’s my code.

{if logged_in}
{embed
="includes/_head"}
{embed
="includes/_header"}
<main>
 <
div class="container">
  <
section class="status">
   <
h1 class="centered">How do you feel?</h1>
   
{exp:channel:form channel="posts" class="form form-status" dynamic_title="{post_{entry_id}" include_jquery="no" datepicker="no"}
   
<input type="hidden" name="title" id="title" value="{title}" size="50" maxlength="100" onkeyup="liveUrlTitle();">
      <
div class="row">
     <
textarea name="post_text" value="{post_text}" placeholder="Please keep this relevant. Your post can be moderated."></textarea>
    </
div>
    <
div class="row feed-post">
     
{field:post_picture}
     
<input type="submit" name="submit" value="send" class="btn btn-send"/>
    </
div>
   
{/exp:channel:form}

  
</section>

  <
section class="feed">
   <
h1 class="centered">The wall</h1>
   <
div class="delete-ajax" ></div>
   
{embed="/includes/scroll_feed"}
  
</section>
 </
div>
</
main>

{embed="includes/_footer"}
{
/if}


{if logged_out}
{embed
="site/login"}
{
/if} 

SCROLL FEED

{exp:infinite_scroll:wrapper ajax_container=“ajax_container” embed_template_url=”{homepage}includes/scroll_feed” xid_element_id=“infinite_scroll_xid” process_indicator=“process_indicator” next_chunk_link=“next_chunk_link” parse=“inward”}

{infinite_scroll_container_top}
<div id=“ajax_container”>
{/infinite_scroll_container_top}

<input type=“hidden” id=“infinite_scroll_xid” value=”{XID_HASH}”>

{exp:channel:entries channel=“posts” status=“open|featured” dynamic=“no” limit=“3” paginate=“bottom” parse=“inward”}

{if member_group == “6”}
{sn_staff-post}
{if:else}
{sn_members-post}
{/if}

{paginate}
<div class=“centered”>
{exp:infinite_scroll:next_chunk_link}{if next_page}Load more{/if}{/exp:infinite_scroll:next_chunk_link}
</div>
{/paginate}

{/exp:channel:entries}

{infinite_scroll_container_bottom}
</div><!—End of #ajax_container—>
{/infinite_scroll_container_bottom}

{/exp:infinite_scroll:wrapper}

EG. {sn_staff-post}

<article class="feed-item feed-item--staff">
 <
span class="feed-item__date">{entry_date format="%d %F %Y"<small>- {entry_date format="h.%H:%i"}</small></span>
 <
div class="feed-item__header">
  <
div class="user-box user-box--feed-item">
   
{exp:zoo_visitor:details member_id="{author_id}"}
   
<div class="user-box--right">
    <
h2 class="staff-name">Staff</h2>
   </
div>
   
{/exp:zoo_visitor:details}
   {if member_group 
== '6' OR member_group =='1'}
   
<ul class="edit-box">
   <
li class="edit">{exp:edit_this:entry entry_id="{entry_id}" channel_id="{channel_id}" author_id="{author_id}"}<a href="{edit_this_url}">[Edit]</a>
{/exp:edit_this:entry} </li>
   <
li>
    <
a href="#" class="delete-link">[Delete]</a>
   </
li>
   <
li class="delete delete-entry">Are you sure? <a href="#" class="abort_delete">No</a> / {exp:delete:link class="confirm_delete" id="{entry_id}" type="entry" template="includes/delete_entry" alert="false"}Yes{/exp:delete:link}</li>
   </
ul>
   
{/if}
  
</div>
 </
div>
 
{if post_picture}
 
<div class="feed-item__image">
  <
figure>
   
{exp:ce_img:single src="{post_picture}" 
      
max_width="960"
      
alt="{title}-image"
      
allow_scale_larger="true"
     
}
  
</figure>
 </
div>
 
{/if}

 
<div class="feed-item__body">
  <
p>{post_text}</p>
  
{exp:likee:like entry_id="{entry_id}" skip_jquery="true"}
  
<div class="social-info">
   <
span class="like">
    
{like}
   
</span>
   <
ul class="social-info__review">
    <
li>Like <span class="text-counter">({like_count})</span></li>
    <
li>Comments <span class="text-counter">({comment_total})</span></li>
   </
ul>
  </
div>
  
{/exp:likee:like}
 
</div>
 <
div class="feed-item__comments">
  <
section class="comments-list">
   <
div class="user-box user-box--comments-list" id="comments-container_{entry_id}">
    
{embed="includes/_comment" entry_id="{entry_id}"}
   
</div>
  </
section>

  
{exp:comment:form channel="posts" form_class="form form-comment" form_id="comment-form_{entry_id}" entry_id="{entry_id}" return="{homepage}"}
         
<div class="row">
          <
textarea name="comment" placeholder="Please keep this relevant. Your comment can be moderated.">{comment}</textarea>
      </
div>
         <
div class="row">
    <
input type="submit" name="submit" value="comment" class="btn" id="comments-btn_{entry_id}"/>
   </
div>
  
{/exp:comment:form}
  
 
</div>
</
article> <!-- END ARTICLE --> 

 

ebiasini
# 1
ebiasini

MY DOCUMENT READY JQUERY

$('.delete-comment .confirm_delete') .click (function() {
        
var link = $(this).attr('href')
        var 
item = $(this).closest('.row')
        $(
'.delete-ajax').fadeIn().load(link, function() {
                
$(item).fadeOut();
            
});
        $(
this).hide();
        return 
false;
    
});

 $(
'.delete-entry .confirm_delete') .click (function() {
        
var link = $(this).attr('href')
        var 
item = $(this).closest('article')
        $(
'.delete-ajax').fadeIn().load(link, function() {
                
$(item).fadeOut();
            
});
        $(
this).hide();
        return 
false;
    
});


$( 
".delete-link" ).click(function() {
  
$(this).parent().next(".delete").toggle("fade");
});

$( 
".abort_delete" ).click(function() {
  
$(this).parent().fadeOut("slow");
});