Question

我的页面上有一系列带有onclick事件的按钮，以调用名为ShowCenter（）的jQuery函数，该函数将内容填充到div中。这已经工作了很长时间了：

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

今天，我添加了一个新的function 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>

Answer 2

之所以出现此问题，是因为，正如@Mangesh Auti所说，由于fadeIn（500），在调用第二个函数之前第一个函数没有完成。这可以通过回调来处理，但我做了一些简单的事情，因为问题仅出在12个按钮上。我修改了ShowFarRight函数，使其包含两组代码。当第一个完成时，第二个开始，并且可以工作。我不再通过单击此特定按钮来调用ShowCenter。

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

现在这两个功能一个接一个地执行。

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

2 个答案: