javascript - JQuery 函数被调用，未执行并且开发控制台中没有错误

Question

我的页面有一系列带有 onclick 事件的按钮，用于调用名为 ShowCenter() 的 jQuery 函数，该函数用内容填充 div。这已经工作了很长时间:

<div class="C1"><button class="button_01" id="first" onclick="ShowCenter(1); ShowFarRight(150);">Button Text Here</button></div>

今天，我添加了一个新的函数 ShowFarRight()，以便在调用第一个函数后立即填充另一个 div:

<script>
function ShowFarRight(type) {
  console.log("Far Right-1");
  $(" #C3 ").empty();
  $(" #C3 ").scrollTop();
  var filename = "text_" + type + ".htm"
  $( "#C3" ).hide().load( filename ).fadeIn(500);
  console.log("Far Right-2");  }
</script>

问题是 ShowFarRight 不执行任何操作，并且 Firefox 和 Chrome 开发控制台不显示 console.log 消息或任何其他错误。

编辑:这是 ShowCenter 的代码

<script>
var CurrentPageLoad
function ShowCenter(type) {
    $(" #C2 ").empty();
    $(" #C2 ").scrollTop();
    var filename = "text_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
    CurrentPageLoad = type;
    console.log("CPL " + CurrentPageLoad);
}
</script>

console.log 确实显示了。

Answer 1

您可能没有添加 ID 为 C2 和 C3 的 div

试试这个 https://www.w3schools.com/code/tryit.asp?filename=G5YT4BCP4J3J

    <script>
        var CurrentPageLoad;
        function ShowFarRight(type) {
            console.log("Far Right-1");
            $(" #C3 ").empty();
            $(" #C3 ").scrollTop();
            var filename = "text_" + type + ".html";
            var filename = 'https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_basic&stacked=h'; //remove this line
            console.log(filename);
            $( "#C3" ).hide().load( filename ).fadeIn(500);
            console.log("Far Right-2");
        }

        function ShowCenter(type) {
            $(" #C2 ").empty();
            $(" #C2 ").scrollTop();
            var filename = "text_" + type + ".html";
            var filename = 'https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_basic&stacked=h'; //remove this line
            $( "#C2" ).hide().load( filename ).fadeIn(500);
            CurrentPageLoad = type;
            console.log("CPL " + CurrentPageLoad);
        }
    </script>
    <div class="C1"><button class="button_01" id="first" onclick="ShowCenter(1); ShowFarRight(150);">Button Text Here</button></div>
    <div id="C2"></div>
    <div id="C3"></div>