0

I am struggling to get a more/less working in an ajax-loaded section of a webpage. I adapted the good script http://jsfiddle.net/gDvyR/72/, mainly by adding "on" functionality as I understood this solves the ajax issue. See resulting http://jsfiddle.net/033mg0cf/1/. The fiddle works, but not within the ajax-created section. The JQuery is in page calling the ajax section, not in the section itself. How to solve?

<p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. etc etc </p>
<a class="readmorebtn">Read more</a>

var moreText = "Read more",
lessText = "Read less",
moreButton = $("a.readmorebtn");

moreButton.on("click", function () {
var $this = $(this);
$this.text($this.text() == moreText ? lessText :   moreText).prev(".more").slideToggle("fast");
Paul
  • 117
  • 2
  • 9
  • 5
    i don't see any ajax calls – messerbill May 19 '16 at 15:47
  • I think Paul is mixing up terminology and is referring to any content that is dynamically created after the DOM is loaded as AJAX. Probably the line `$this.text($this.text() ==` – Josh Stevenson May 19 '16 at 15:59
  • The section is generated by another jquery, .load. I am trying to get this separate more/less script working within this section. – Paul May 19 '16 at 15:59

1 Answers1

0

This unfortunately only received comments not suggested solutions.

On googling further, particularly to see if a problem with toggle in ajax content, this gave the solution: Jquery events not working on ajax loaded content

Specifically, the more/less worked in ajax content after replacing:-

moreButton = $("a.readmorebtn");
moreButton.on("click", function () {

with:-

$("body").on("click","a.readmorebtn", function () {
Community
  • 1
  • 1
Paul
  • 117
  • 2
  • 9