Javascript in repeater stops working when I click load more

Resolved

(@spencermerpi)

This plugin is almost working exactly how I need it to. If you go to http://freshsandbox.com/bin14/test/
You’ll see that when you hover on the first three posts, a black box appears. After clicking the load more button, the next two posts do not have that hover effect.

I got that hover effect to work by putting my script in the repeater.

Here is my repeater code:

<?php $postlink = get_permalink();
					$id = get_the_id();
					$imglink = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
					$head1 = get_the_title();
					$head2 = get_post_meta ($id, 'support_text', true)
					?>
					<div class="relative fullwidth eventImage">
    				<a href="<?php echo $postlink; ?>"><img src=" <?php echo $imglink;?>" class="fullwidth"/></a>
    				<div class="absolute fullwidth top left contentsCenter ourEvents">
    				<?php
    				if ($i == 0) { echo "<h1>$head1</h1>";
    				echo "<h2>$head2</h2>"; }
    				else {echo "<h2>$head1</h2>"; }

    				$i++; ?>
    				</div>
				<div class="moreInfo absolute top left display-none">
				<a class='hoverContent' href="<?php echo $postlink;?>">
				<?php
				echo "<h2>$head1</h2>";
				echo "<p>$head2</p>";
				?><?php echo get_the_content_with_format($more_link_text = '...Read More');  ?></a>

				</div>
    				</div>

<script>
$('.eventImage').hover( function() {
$(this).children('.moreInfo').toggle();
$(this).children('.ourEvents').toggle();
});
</script>

Do you know why this is happening?

Thank you
Spencer

https://wordpress.org/plugins/ajax-load-more/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Darren Cooney
(@dcooney)

11 years, 7 months ago
Hi Spencer,
You can likely take the JS out of the repeater put in your main js file with the following change:
```
<script>
$('.eventImage').on('hover', function() {
$(this).children('.moreInfo').toggle();
$(this).children('.ourEvents').toggle();
});
</script>
```
The on() jQuery event should bind hover to all dynamically loaded elements.
Thread Starter spencermerpi
(@spencermerpi)

11 years, 7 months ago

Thank you so much for your response.
That doesn’t seem to be working. I may not have done it correctly. Other than putting the code you supplied in a js file and sourcing that js file in my header is there anything else I need to do?
Plugin Author Darren Cooney
(@dcooney)

11 years, 7 months ago
In your hover.js file.

Change the code to be this:
```
(function($) {
$('.eventImage').on('hover', function() {
$(this).children('.moreInfo').toggle();
$(this).children('.ourEvents').toggle();
});
})(jQuery);
```
You also have 3 JS errors that I see in the console.
http://cl.ly/image/3G1i3J1p2g23

You may want to try and solve those before debugging this issue.
Thread Starter spencermerpi
(@spencermerpi)

11 years, 7 months ago

I gave up on javascript and found a CSS solution for the hovering.

Thank you so much for your help! The plugin rocks!!!

Plugin Author Darren Cooney
(@dcooney)

11 years, 7 months ago

ok, yea CSS would be a much better solution.

Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Javascript in repeater stops working when I click load more’ is closed to new replies.