jQuery - add ticker to DOM after ajax call

Question

I'm using one of the jQuery tickers within my new project and pages are loaded using the HTML5 History API (pushState and popState). Once the page content has been loaded using jQuery.getJSON() I get a warning saying 'Element does not exist in DOM!' - and I believe it is referring to the ticker container (returned after ajax call) as it doesn't work after content has loaded.

I've tried to instantiate the ticker again in the jQuery.getJSON()'s callback function, but this didn't resolve the problem:

jQuery.getJSON(url, function(data) {
    jQuery.each(data, function(k, v) {
        $('#' + k + ' section').fadeOut(200, function() {
            $(this).replaceWith($(v).hide().fadeIn(200));
        });             
    });
    $('ul#feedNews').ticker({
        speed: 0.10,
        controls: true,
        titleText: '<strong>Latest news</strong>',
        displayType: 'reveal',
        direction: 'ltr',
        pauseOnItems: 3000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    });
});

Any idea what would be the solution?

Answer 1

This is most likely caused by the plugin only working with elements present on load. I guess it does not use delegate, live or the delegated version of on internally.

Your options are to either find a plugin which works with dynamic content or amend this plugins source to use one of the above mentioned methods.