Geek Answers Handbook

JQuery does not work in Ajax generated content

I had this problem for some time, and it really bothered me.

I use two wordpress plugins, one for loading ajax and one for ajax - more. You can see them in the following links:

both of them work fine, but "Read More" does not work in messages created by "Load More". here's the jQuery code in "Read More," which I think should be edited:

var backgroundAction = false; jQuery.fn.AJAXReadMore = function (options) { var $ = jQuery, options = $.extend({ animateSpeed: 'slow', errorMessage: "Error.<br/>Try again later.", errorClass: "loading-error", loadingClass: "loading", spacerClass: "loading-spacer", loadedClass: "loaded", contentElSelector: ".entry-part", moreElSelector: ".more-link", moreContainerSelector: ".more-link-container", onUpdateEvent: "onupdate", parentScrollableEl: $("html,body"), scroll: true, scrollToSelector: ".entry-header", scrollLowBound: 0, ajaxData: {} }, options); return this.each(function () { var post = { data: $.extend(options.ajaxData, { 'AJAX-mode': '1' }), moreLink: $(options.moreElSelector, this), navigation: $(options.moreContainerSelector, this) .add(options.moreElSelector, this), content: $(options.contentElSelector, this), el: $(this) }, busy = false; if (!(post.content.length)) post.content = post.el; $(post.moreLink).on('click', function () { if (busy) return false; var scroll = (options.scroll) && !(backgroundAction); busy = true; post.scrollTo = $(options.scrollToSelector, post.el); if (!(post.scrollTo.length)) post.scrollTo = post.el; var newContent = post.content.clone(true) .hide() .addClass(options.loadingClass) .html("") .insertAfter(post.content), spacerHeight1 = options.parentScrollableEl.scrollTop() + options.parentScrollableEl.height() - newContent.offset().top, spacerHeight = (spacerHeight1 > 0) ? spacerHeight1 : 0, spacer = newContent.clone() .addClass(options.spacerClass) .addClass(options.loadingClass) .insertBefore(newContent) .animate({ height: "0px" }, options.animateSpeed) .show(); post.navigation.addClass(options.loadingClass); if (scroll) { if ((post.scrollTo.offset().top - options.parentScrollableEl.scrollTop() > options.scrollLowBound)) { options.parentScrollableEl.animate({ scrollTop: post.scrollTo.offset().top + "px" }, options.animateSpeed); }; }; $.when( $.ajax({ type: "GET", url: post.moreLink.attr('href'), dataType: "html", cache: true, data: post.data }), post.scrollTo, options.parentScrollableEl).then( /*success:*/ function (args) { /*args: [ data, "success", jqXHR ]*/ var data = args[0]; var dataObj; var bodyEl = { length: 0 }; try { dataObj = $(data); bodyEl = dataObj.find('body'); } catch (e) {}; var dt = { url: post.moreLink.attr('href'), referrer: $(location).attr('href') }; var textStatus = args[1]; if (bodyEl.length) { dt = $.extend(dt, { body: bodyEl.html(), title: dataObj.find('title').text() }); } else { dt = $.extend(dt, { body: data }); }; post.navigation.addClass(options.loadedClass) .removeClass(options.loadingClass); newContent.html(dt.body) .show() .removeClass(options.loadingClass) .slideDown(options.animateSpeed) .trigger(options.onUpdateEvent) .trigger('counter.hit', dt); spacer.addClass(options.loadedClass) .removeClass(options.loadingClass) .slideUp(options.animateSpeed, function () { $(this).remove(); }); busy = false; }, /*error:*/ function () { /*args: [ request, "error", jqXHR ]*/ var request = args[0], textStatus = args[1]; newContent.remove(); post.navigation.addClass(options.errorClass); spacer.hide() .addClass(options.errorClass) .removeClass(options.loadingClass) .html(options.errorMessage) .fadeIn(options.animateSpeed) .delay(1000) .fadeOut(options.animateSpeed) .delay(100) .hide(options.animateSpeed, function () { $(this).remove(); post.navigation.removeClass(options.loadingClass) .removeClass(options.errorClass); }); busy = false; }); return false; }); }); };

PS: I used .live , .on and .delegate , and they did not work.

Edit: and this is the “Download more” code. any idea how to call "More" through this?

jQuery(document).ready(function() {

 // The number of the next page to load (/page/x/). var pageNum = parseInt(pbd_alp.startPage) + 1; // The maximum number of pages the current query can return. var max = parseInt(pbd_alp.maxPages); // The link of the next page of posts. var nextLink = pbd_alp.nextLink; /** * Replace the traditional navigation with our own, * but only if there is at least one page of new posts to load. */ if(pageNum <= max) { // Insert the "More Posts" link. $('#ajaxload') .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>') .append('<p id="pbd-alp-load-posts"><a href="#">Show More</a></p>'); // Remove the traditional navigation. $('.pagination').remove(); } /** * Load new posts when the link is clicked. */ $('#pbd-alp-load-posts a').click(function() { // Are there more posts to load? if(pageNum <= max) { // Show that we're working. $(this).text(''); $(this).append('<img src="http://bluhbluh.com/wp-content/themes/coffebook/img/loader.gif">'); $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post', function() { // Update page number and nextLink. pageNum++; nextLink = nextLink.replace(/\/page\/\d{0,9}/, '/page/'+ pageNum); // Add a new placeholder, for when user clicks again. $('#pbd-alp-load-posts') .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>') // Update the button message. if(pageNum <= max) { $('#pbd-alp-load-posts a').text('Show More'); } else { $('#pbd-alp-load-posts a').text('No More Posts'); } } ); } else { $('#pbd-alp-load-posts a').append('.'); } return false; });

}); Code>

+4
source share
4 answers

Use the .on() jQuery method.

 $(post.moreLink).on('click',function(){ /**codehere**/ });

.on() allows you to add events to dynamically loaded content.

+2
source

For actions on future elements you should use jQuery on .

 $(document).on('click',post.moreLink, function(){ // write your codes });

Note that it is different from $(post.moreLink).on('click',function(){.....}); which will not affect future elements. Also, make sure your post.moreLink variable is post.moreLink .

+1
source

I do not have the right to comment, so I am using the answer, and I hope this helps.

I think the problem is related to starting the jQuery action of the first plugin after updating the DOM with the second plugin. In other words, you need to invoke the Readmore plugin actions in the AJAX functions related to the LoadMore plugin (after returning the results of the LoadMore).

I think I have already encountered this problem:

wordpress plugin jquery script not working in content loaded via ajax

+1
source

You can fix this in two ways.

Yes, you need to use the .live method, which, if used correctly, certainly works.

The second way is to create an event binding method and use this method in ajax callbacks that run after the content has been received and added to the document.

In your code, I see that you are doing the material when the data is loaded successfully, but nothing indicates that you are actually binding any events to new content

0
source

More articles:


All Articles