Question

我有以下代码在页面加载后动态地将jQuery加载到页面中，然后尝试运行它自己的一些jQuery。页面标题的第一个控制台日志工作。问题出现的时候，它无法在页面中找到类“special-div”并将其替换为相应的文本。有什么想法吗？

//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" ) );
        });
    });
})();

HTML看起来像这样：

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

我正在处理的古怪的CMS只允许我粘贴一个外部javascript文件，所以我必须加载jQuery和我需要的所有其他脚本通过那个文件。

修改

所以我跑了几个额外的测试并尝试了这个：

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

我得到的回应是：

jQuery is loaded on: undefined

Answer 1

如果要在第二个console.log中返回div的内容，请使用$( this ).html()而不是$( this ).text()

Answer 2

如果您想将每个$( '.special-div' )的文字替换为其属性内容，则必须执行以下操作：

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

而不是

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

否则你会得到所有事件的相同替代品。

Answer 3

我尝试过它并且有效但是如果你把它放在<head>并且在它之前加载了另一个jQuery，那么DOM搜索将在DOM准备好之前运行，以便它找不到DOM。
（无window.setTimeout(function() { checkReady(callback); }, 100);的情况）
（另一个CMS插件可能会加载jQuery）

因此，以window.onload时间的方式运行脚本可能会更好或者将它放在<body>的末尾也可以。

动态加载的jQuery没有找到类

3 个答案: