The Jquery plugin does not work for items loaded via Ajax

advertisements

Description: I'm working on a project that loads elements with an expiration date derived from my database. I'm using a Jquery plugin that uses the HTML5 Data Type Attribute as the "end date". All works well when the elements are loaded into the DOM but I can't figure out how to make this plugin run on the elements loaded via ajax that triggers from a scroll function. Admittedly Javascript isn't my strong suit, and I'm not looking for a coded answer ... I'm just looking for direction. There is clearly something that I simply don't know or the way I'm understanding my problem is off because 4 days of Googling and trial and error hasn't produced any results. Thanks everyone!

EDIT: This is what I've tried -

1) an ajax complete function -

$(document).ajaxComplete( function(){ $('.countdown').countdown(); });

2)adding a script tag echoed in my php results -

<script>$('.countdown').countdown();</script>

3)adding it into my .scroll function -

$(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            if (is_loading == false) { // stop loading many times for the same page
                // set is_loading to true to refuse new loading
                is_loading = true;

                // display the waiting loader
                $('#loader').show(500);

                // execute an ajax query to load more statments
                $.ajax({
                    url: 'JSON-TEST/load_more.php',
                    type: 'POST',
                    data: {last_id:last_id},
                    success:function(data){
                        // now we have the response, so hide the loader
                        $('#loader').hide(500);
                        // append: add the new statments to the existing data
                        $('#content').append(data);
                        // set is_loading to false to accept new loading
                        is_loading = false;
                        $('.countdown').countdown();

                    }
                });

            }
       }
    });
});

All three successfully call the script. I can tell because that div actually gets populated with content however , I get all zeros in the timer.


Use .on method with the event delegation form. This basically consists on delegating the listening of the event to the closest parent node of the element that you're trying to listen. As a rule of thumb always delegate the event to the closest parent that already exists into the dom. DONT go all the way up to document because of perf reasons.

Something like:

$("closest-parent-of-the-element").on ("event-that-you-want", "element-loaded-through-ajax", function (e) { // listener code here })

That should do the trick.