Dynamically loaded jQuery not finding class

Question

I have the following code which loads jQuery into the page dynamically after page load and then attempts to run some jQuery of its own afterwards. The first console log of the page title works. The issue comes when it cant find the class "special-div" later on in the page and replace it with the appropriate text. Any thoughts?

//Load jQuery library using plain JavaScript
(function(){
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(newscript);

// Poll for jQuery to come into existance
var checkReady = function(callback) {
    if (window.jQuery) {
        callback(jQuery);
    }
    else {
        window.setTimeout(function() { checkReady(callback); }, 100);
    }
};

// Start polling...
checkReady(function($) {
    console.log( 'jQuery is loaded on: ' + $('title').text() );
    $( '.special-div' ).each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        $( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );
        });
    });
})();

The HTML looks like this:

<div id="something" class="special-div" title="else">&nbsp;</div>

The wacky CMS that I am working on only allows for me to paste in one external javascript file so i have to load in jQuery and all other scripts i need through that one file.

Edit:

so i ran a few additional tests and tried this:

console.log( 'jQuery is loaded on: ' + $( '.special-div' ).attr( "id" ) );

the response i am getting is:

jQuery is loaded on: undefined

I tried it with jsfiddle and it works http://jsfiddle.net/L072eyax/ — 3y3skill3r, Mar 30 '15 at 14:35
The code works as-is, but the div is deleted by the call to `replaceWith`. Are you trying to refer to `.special-div` *after* that? — Rick Hitchcock, Mar 30 '15 at 14:45
nope. in th page i am working on the code does nothing and the console log for the each index never happens. — dpegasusm, Mar 30 '15 at 14:51
Check this: http://stackoverflow.com/questions/17451616/using-each-on-dynamic-objects-in-jquery — JuaRoAl, Mar 30 '15 at 14:54

score 0 · Answer 1 · answered Mar 30 '15 at 14:38

0

If you want to return content of div in second console.log, use $( this ).html() instead of $( this ).text()

answered Mar 30 '15 at 14:38

3y3skill3r

964
1
11
35

score 0 · Answer 2 · answered Mar 30 '15 at 14:50

0

If you want to replace text for each $( '.special-div' ) with the content of their attributes, you have to do:

$( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );

instead of

$( '.special-div' ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );

otherwise you get the same replacement for all occurrences.

answered Mar 30 '15 at 14:50

F2K

481
4
11

Thanks i have made that change but still nothing. I edited the original with some more information. – dpegasusm Mar 30 '15 at 14:57
Using the code as-is I get the right output, have you any other JS error in browser console (Firebug, Chrome Inspector or whatever)? – F2K Mar 30 '15 at 15:07

usp · Answer 3 · 2015-03-30T15:13:24.997

I tried it and it works.
But if you are putting it in <head> and another jQuery is loaded before it, DOM searching will run before the DOM getting ready so that it can not find the DOM.
(case of no window.setTimeout(function() { checkReady(callback); }, 100);)
(another CMS plugin might load jQuery)

So it could be better to run the script on kind of window.onload timings.
Or putting it on the end of <body> may also work.

Dynamically loaded jQuery not finding class

3 Answers3