Javascript 加载另一个php文件时，jquery函数冲突并返回错误_Javascript_Php_Jquery

Javascript 加载另一个php文件时，jquery函数冲突并返回错误

javascript php jquery

Javascript 加载另一个php文件时，jquery函数冲突并返回错误,javascript,php,jquery,Javascript,Php,Jquery,我有以下在终端窗口中显示键入文本的工作示例应用程序：步骤1-没有问题的工作示例（一个文件夹中有3个文件：index.php、style.css和键入的custom.js）对于style.css，我有以下内容： .terminal-window { text-align: left; width: 620px; height: 650px; border-radius: 10px; margin: auto; position: relative; } .termi

我有以下在终端窗口中显示键入文本的工作示例应用程序：

步骤1-没有问题的工作示例（一个文件夹中有3个文件：

index.php

、

style.css

和

键入的custom.js

）对于

style.css

，我有以下内容：

 .terminal-window {
  text-align: left;
  width: 620px;
  height: 650px;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.terminal-window section.terminal {
  color: white;
  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
  font-size: 11pt;
  background: black;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0;
  overflow: auto;
}
.term-home{color: #0095ff;}

我为

typed custom.js

$(function() {
  var data = [

  {
    action: 'type',
    strings: ["typing-1:"],
    output: '<span class="green"><small> This is first typing</small></span>&nbsp;',
    postDelay: 1000,
  },

  {
    action: 'type',
    strings: ["typing-2:"],
    output: '<span class="green"><small>This is second typing</small></span>&nbsp;',
    postDelay: 1000
  },

  ];
  runScripts(data, 0);
});

function runScripts(data, pos) {
    var prompt = $('.prompt'),
        script = data[pos];
    if(script.clear === true) {
      $('.history').html('');
    }
    switch(script.action) {
        case 'type':
          // cleanup for next execution
          prompt.removeData();
          $('.typed-cursor').text('');
          prompt.typed({
            strings: script.strings,
            typeSpeed: 10,
            callback: function() {
              var history = $('.history').html();
              history = history ? [history] : [];
              history.push('<span class="term-home">root:~$</span> ' + prompt.text());
              if(script.output) {
                history.push(script.output);
                prompt.html('');
                $('.history').html(history.join('<br>'));
              }
              // scroll to bottom of screen
              $('section.terminal').scrollTop($('section.terminal').height());
              // Run next script
              pos++;
              if(pos < data.length) {
                setTimeout(function() {
                  runScripts(data, pos);
                                  }, script.postDelay || 1000);
              }
            }
          });
          break;
        case 'view':

          break;
    }
}

//Note: `typed-custom.js` depends on the library from `https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js` which I have included in index.php:

以上各项工作完美无误

步骤2-将外部php

load.php

文件加载到

index.php

但是现在我想从php页面添加另一个显示，因此我创建了一个php文件调用

load.php

，内容如下：

<!DOCTYPE html>
<html>
<head>
<title>load.php show data</title>
 <style>
        .loadData div {display:none;}
        .loadData div.display {display: block;}
 </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="loadData">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
</div>

<a href="#" id="loadMore">Load More</a>

<script>
// this code is used to reduce long div display. example 5 div, reduce it to 3 and when click Load More, it will show all.
$(function () {
    $(".loadData div").slice(0, 3).addClass('display');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".loadData div:hidden").addClass('display');
        if ($(".loadData div:hidden").length == 0) {
           $("#loadMore").remove();
        } else {
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
        }
    });
});

</script>
</body>
</html>

但是，当我运行上面的代码时，我得到一个错误：

typed-custom.js:39 Uncaught TypeError: prompt.typed is not a function
    at runScripts (typed-custom.js:39)
    at typed-custom.js:57

我的终端窗口停止输入第二个文本（我怀疑这是js冲突），但单击“加载更多”按钮没有问题，该按钮也使用js调用

错误屏幕截图：

我搜索了这个错误，它说我可能有jquery冲突，但我不确定冲突是哪一部分。有什么想法吗？

如果load.php要插入index.php中，那么它不应该有自己的html、head和body标记。它应该只是一个将被注入主页的HTML片段。在另一个HTML文档中加载一个全新的单独HTML文档（由HTML/head/body标记表示）没有任何意义

另外，只要index.php加载完毕，您就可以将“load.php”添加到页面中。相反，您可以通过PHP的

include

命令将其包括在内，这样它就可以与index.PHP同时发送到浏览器，而不需要单独获取。这将更有效率，也不容易出错

并且load.php不需要添加jQuery的另一个副本，因此您可以删除它-它可能会导致冲突或意外行为。浏览器将这两个文件视为单个页面的一部分，因此它只需要jQuery的一个副本。

请尝试减少问题中的代码量。显示如何解决当前问题可能很有用，但对于大多数问题，它只与显示重现错误所需的当前代码相关。我的目标是让某人以出色的视觉效果运行此工作示例。我将检查并尝试减少。您好，我已减少了代码，问题开始于

步骤2

。

步骤1

仅用于演示一个正在工作的示例应用程序。

键入的custom.js

存在问题，因此此文件中的代码在哪里？“它仍然会破坏js，因为问题是load.php有js。”…不确定您的意思。您必须给出错误消息等的具体细节。如我所说，load.php不需要添加jQuery的另一个副本-您删除了它吗？

<?php
?>
<!doctype html>
<html lang="en">
<head>

    <title>Test Terminal with another php file load at the bottom (load.php)</title>
    <!-- Get jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
    <script src="typed-custom.js"></script>
    <link href="style.css" rel="stylesheet" />
    <style>
        <!-- internal style -->
    </style>
</head>

<body>

    <!-- terminal -->
    <div class="wrap">
        <div class="title-head"> <h5><font color="white">Test</font></h5></div>
        <div class="type-wrap">
            <div class="terminal-window">
                <header>
                    <div class="button green"></div>
                    <div class="button yellow"></div>
                    <div class="button red"></div>
                    <div class="button black"></div>
                </header>
               <section class="terminal">
                    <div class="history"></div>
                    <span class="term-home">root:~$</span>&nbsp;<span class="prompt"></span>
                    <span class="typed-cursor"></span>
                </section>
            <!-- data -->
    </div>
    </div>
    </div>
    
<!-- NEW CODE HERE WHICH HAS ERROR: try to load an external file using js -->
<div class="container"></div>
<div> This index.php loads "load.php" below</div>
<div id="contents"></div>
<div> ----------------------- </div>
<script>
 $().ready(function() {
        $("#contents").load("load.php");

 });
</script>
</body>
</html>

typed-custom.js:39 Uncaught TypeError: prompt.typed is not a function
    at runScripts (typed-custom.js:39)
    at typed-custom.js:57