0

I have been working on adding more content to a page as the scroll reaches end of page.

The problem is that JavaScript is not working on the content loaded via ajax

Below is a simple code:

HTML:

    <div class="ajax_load_wrapper">
        <div id="title_191">
        <div id="title_172">
        <div id="title_171">
        <div id="title_105">
        <div id="title_95"> 
        <!-- new divs load here on which jQuery events don't work -->
    </div>

    <div id="load_more_vbz" style="display: none;">
        <a href="somelink">loading...</a>
    </div>

jQuery:

(function ($) {

    $(window).on('scroll',function(){
        if (($(window).scrollTop() == $(document).height() - $(window).height() )){
            load_mode_content();
        }
    });

    //loads more content
    function load_mode_content(){
        var link = $('#load_more_vbz a').attr('href');

        $('#load_more_vbz').show(); //show the loading image

        $.get(link).done( function(data){
            $('.ajax_load_wrapper').append(data); //appends new data
            $('#load_more_vbz').hide();
        });
        return false;
    }

})(jQuery);
halfer
  • 19,824
  • 17
  • 99
  • 186
codeomascot
  • 119
  • 2
  • 9
  • Are you talking about event bindings? You need to use either `.live()` or `.on()` for persistent bindings on content loaded after the call depending on your version of jQuery. – Andrew Klatzke Apr 18 '13 at 05:22
  • 1
    Live is for sure deprecated - use only .on – mplungjan Apr 18 '13 at 05:23
  • @AndrewKlatzke - per the references in my answer, you not only have to use `.on()`, but you also have to use it the right way for it to work with dynamic content. – jfriend00 Apr 18 '13 at 05:27
  • @jfriend00 Didn't see your fuller answer prior to the comment; thanks. I was really curious whether he was referencing event bindings since it wasn't clear from the question. – Andrew Klatzke Apr 18 '13 at 05:30
  • Thanks all. The problem is that no event(like click, hover) is working on new divs appended to div.ajax_load_wrapper above. – codeomascot Apr 18 '13 at 05:59

1 Answers1

2

If you're loading content dynamically and you want jQuery event handlers to work in that content, then you have to do one of these things:

  1. Use delegated event handling that will work with dynamically created content and event handlers can be put in place before the content is there.

  2. Install the event handlers after the dynamically created content is in the DOM.

If you are using statically added event handlers, then they won't work on new DOM elements because those DOM elements didn't exist at the time the jQuery selector query was run and the event handlers were added only to the elements that existed at that time.

If you show the content and the event handlers that you're trying to have work in the dynamically loaded content, we could help more specifically.

See these previous discussions for how to use .on() properly with dynamic content:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .on does not work but .live does

Proper use of .on method in Jquery

This is the general idea, explained much more in the above references:

$("static selector").on('click', "dynamic selector", fn);
Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks @jfriend00. I understand on and live but can't figure out where to use them correctly. The problem is that no event(like click, hover) is working on new divs appended to div.ajax_load_wrapper above. Please take a look at code above – codeomascot Apr 18 '13 at 06:02
  • @VaibhavYadav - there are no event handlers other than the `.scroll()` handler in the code you've shown. You will have to show the actual event handlers and the dynamic HTML content that they are targeted at for us to help more specifically. – jfriend00 Apr 18 '13 at 06:11
  • this did not helped me, still no event fired – SkyPunch Aug 26 '13 at 11:40
  • @deepakgates - it works when used properly. I'd suggest you post your own question with your relevant HTML and Javascript. – jfriend00 Aug 26 '13 at 17:20
  • my bad i was using "scroll" with "On()" .. but since scroll does not bubble it cannot be used as live() by On(). – SkyPunch Aug 27 '13 at 07:06