Ajax完成后,加载<script>标记,但仅加载具有特定ID的标记

docodemore

我目前正在使用无限滚动加载更多内容,该内容具有<script>需要运行的标签。所以我将以下代码用作ajax-callback

JS加载ajax回调:

function ajaxLoadedCallback() {
      // contentElem is the HTML element you've loaded via ajax
      scriptx = document.getElementsByTagName("script");

      // Load scripts into new array because 
      // scriptx seems to change as scripts execute, at least in some browsers
    scripts = new Array();
    for (var idx=0; idx<scriptx.length; idx++) {

        if (jQuery(scriptx[idx]).is("#inline-comments")) {
                scripts[idx] = scriptx[idx].text;
        }

    }

        console.log (scripts[idx]);
      // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
         if (scripts[idx].length!=0) {
            try {
              // create a function for the script & execute it
              f = new Function(scripts[idx]);
              f();
            } catch(se) {

            } // end try-catch
         } // end if
      } // end for

}

每个内容帖子都有我要加载的脚本标签:

<script id="inline-comments" >
    console.log ('<?php echo $post->ID; ?>' + 'has loaded...');
    var tid_<?php echo $post->ID; ?> = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
        clearInterval( tid_<?php echo $post->ID; ?> );       
        inline_comments_ajax_load(<?php echo $post->ID; ?>)
    }, 100 );   
</script>

获取未捕获的TypeError:无法在此行上读取未定义错误的属性“ length”: if (scripts[idx].length!=0) {

Ajax回调在正确的时间加载,但是由于我认为scripts[idx]是空的而中断了但为什么?当我使用console.log()它时,显示时scriptx[idx]具有ID和ID名称。

更新谢谢PSL!console.log表明它正在查找脚本,但是scripts.length返回零

function ajaxLoadedCallback() {
    scriptx = document.getElementsByTagName("script");


    scripts = new Array();
    for (var idx=0; idx<scriptx.length; idx++) {

        if (jQuery(scriptx[idx]).is(".inline-comments-script")) {
            console.log (".inline-comments-scriptfound!");
            console.log ("####### .text #######");
            console.log (scriptx[idx].text);
            console.log ("####### .innerHTML ######");
            console.log (scriptx[idx].innerHTML);
            scripts.push = scriptx[idx].innerHTML;
        }

    }
    console.log ("####### END ######");
    console.log ("Found "+scripts.length+ " script(s)");

      // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
        var content = scripts[idx];
            if (content.length) {
                try {
              // create a function for the script & execute it
              f = new Function(content);
              f();
            } catch(se) {

            } // end try-catch
         } // end if
      } // end for

}

现在工作!请参阅下面的PSL答案-如果您拥有wordpress,也可以实时查看它:https : //github.com/MattMcFarland/inline-ajax-comments-很棒!

PSL

您这里有几个问题。

for (var idx=0; idx<scriptx.length; idx++) {

        if (jQuery(scriptx[idx]).is("#inline-comments")) {
                scripts[idx] = scriptx[idx].text;
        }

    }

即使没有匹配项,您也要递增循环迭代变量,并且您不希望将任何项目推入数组。因此,如果第一个脚本与您的条件不匹配,scripts[0]则将无法定义条件,因此当您length在条件中访问undefined属性时会收到错误消息if (scripts[idx].length!=0) {

另一个问题是scriptx[idx].text这里的文本是一个函数,因此您需要元素的真实文本而不是函数引用,因此您应该编写jQuery(scriptx[idx]).text()scriptx[idx].innerHTML由于您使用的是id并且id不应该重复,因此可以简单地写成:

     var txt = jQuery('#inline-comments').text();
     if (txt.length) {
        try {
          // create a function for the script & execute it
          f = new Function(scripts[idx]);
          f();
        } catch(se) {

        } // end try-catch
     } // end if

如果您打算inline-comments从ID转到课程,并且希望访问其中的多个课程,则应该可以使用。

 scripts = [];
    for (var idx=0; idx<scriptx.length; idx++) {
        if (jQuery(scriptx[idx]).is(".inline-comments")) {
                scripts.push(scriptx[idx].innerHTML);
        }
     }
     // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
          var content = scripts[idx];
         if (content.length) {
            try {
              // create a function for the script & execute it
              f = new Function(content);
              f();
            } catch(se) {

            } // end try-catch
         } // end if
      } // end for

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ajax请求在循环内,完成后重新加载页面

来自分类Dev

异步任务完成后加载PageViewController

来自分类Dev

页面加载完成后执行javascript

来自分类Dev

页面加载完成后调用函数

来自分类Dev

请求完成后重新加载表

来自分类Dev

加载完成后显示UIImageView

来自分类Dev

加载完成后的模态闭合

来自分类Dev

隔离完成后再次加载数据

来自分类Dev

整页加载完成后,jQuery AJAX无法更新数据库

来自分类Dev

页面加载完成后预加载大图像

来自分类Dev

页面加载完成后预加载大图像

来自分类Dev

使用模式视图完成后重新加载UICollectionView

来自分类Dev

加载完成后,iOS UIWebView不会更新其大小

来自分类Dev

CSS3 Animation完成后重新加载javascript

来自分类Dev

jqrid重新加载完成后调用函数

来自分类Dev

页面加载完成后打开css弹出窗口

来自分类Dev

通知显示完全完成后重新加载页面

来自分类Dev

设计标题脚本,以在文档加载完成后运行

来自分类Dev

文件加载完成后从FileReference检查文件类型

来自分类Dev

Unity加载初始屏幕完成后,Unity游戏崩溃

来自分类Dev

动态加载的JS在功能完成后才可用

来自分类Dev

任务完成后 Gulp 重新加载浏览器

来自分类Dev

整个页面加载完成后才执行JS

来自分类Dev

超级视图加载完成后调整子视图的大小

来自分类Dev

webview加载完成后,从webview中的getelementbyid获取innerText

来自分类Dev

所有ajax调用完成后的事件

来自分类Dev

jQuery-所有ajax完成后执行操作

来自分类Dev

当所有ajax请求都完成后,则

来自分类Dev

在所有ajax请求完成后执行代码