动态加载的 jQuery 找不到类答案

【问题标题】：Dynamically loaded jQuery not finding class动态加载的 jQuery 找不到类
【发布时间】：2015-03-30 23:13:24
【问题描述】：

我有以下代码在页面加载后动态地将 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

【问题讨论】：

我用 jsfiddle 试过了，它可以工作 jsfiddle.net/L072eyax
代码按原样工作，但通过调用replaceWith 删除了 div。在之后你想引用.special-div吗？
不。在我正在处理代码的页面中，什么都不做，每个索引的控制台日志永远不会发生。
检查这个：stackoverflow.com/questions/17451616/…

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

【解决方案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" ) );

否则你会得到所有出现的相同替换。

【讨论】：

谢谢我已经做出了改变，但仍然没有。我用更多信息编辑了原件。
按原样使用代码我得到了正确的输出，您在浏览器控制台（Firebug、Chrome Inspector 或其他）中是否有任何其他 JS 错误？

【解决方案3】：

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

因此，最好在 window.onload 时间上运行脚本。
或者放在<body> 的末尾也可以。

【讨论】：