动态生成目标元素（jQuery）

Question

I current have something similar to this ( http://jsfiddle.net/my7bM/ ) working on the page as long as it is generated using php, however on another page there is the same functionality happening, only on that page the content is dynamically generated using Ajax and the script does not work (JS newbie therefore any help most appreciated)

I've tried this but it still does not work

$('.read-more').on("click", function (e) {
    e.preventDefault();
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
    $(this).hide();
    return false;
    );

$('.close-more').on("click", function (e) {
    e.preventDefault();
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
    $(this).closest('.myContent').hide();
    return false;
});

Any help would be great, Thanks!

Answer 1

You need event delegation for handling events to dynamically added DOM .

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

try this:

 $(document).on("click",'.close-more', function (e) {
  e.preventDefault();
  $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
  $(this).closest('.myContent').hide();
  return false;
});

Also prefer using the closest parent DOM(which remains static) instead of $(document)