Question

我有一个主页，带有2个按钮（每个按钮引用另一页）：

<html>
    <head>
        <title>TBD</title>      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
    </head>

    <body>
        <button id="A">A</button>
        <button id="B">B</button>
    </body>
</html>

login.js：

$(document).ready(function(){

    $("#A").click(function(){       
        $.get( "/A.html", function( data ) {
            console.log("A button clicked");
            document.write(data);   
        });

    });

    $("#B").click(function(){       
        $.get( "/B.html", function( data ) {
            console.log("B button clicked");
            document.write(data);   
        });

    });
});

A和B（HTML和JS）具有相同的行为：例如（B.html＆B.js）：

<html>
    <head>
        <title>B</title>                    
        <script type="text/javascript" src="js/B.js"></script>      
    </head>

    <body>
        B
        <button id="backButton">Back</button>
    </body>
</html>


$(document).ready(function(){
    console.log("B js ready");
    $("#backButton").click(function(){      
        console.log("back button clicked");
        $.get( "/back.html", function( data ) {
            console.log("get results");
            document.write(data);   
        });

    });

});

当我从主页上单击A或B按钮并转到新页面时，我可以在控制台日志中看到A.js（或B.js）已准备就绪（因此已加载A.js或B.js），但是之后，如果我单击“后退”按钮，则什么也没有发生（即使没有调用console.log("back button clicked");行。

为什么会发生这种情况以及如何解决？

Answer 1

您需要将脚本标记移动到html标记的末尾，以便页面将在javascript调用之前呈现。

<html>
  <head>
    <title>B</title>
  </head>

  <body>
    B <button id="backButton">Back</button>
    <script type="text/javascript" src="js/B.js"></script> //add script line here!
  </body>
</html>

要显示渲染问题，请将脚本标签放在head标签之前，然后在B.js文件中添加调试器，并在开发人员工具打开的情况下运行页面。

$(document).ready(function() {
  debugger; // Add debugger here!
  console.log('B js ready');
  $('#backButton').on('click', function() {
    console.log('back button clicked');
    $.get('/back.html', function(data) {
      console.log('get results');
      document.write(data);
    });
  });
});

加载页面B时，您会看到该按钮尚不存在，因此脚本无法绑定click事件。

Answer 2

尝试这种方式...对我有用...您需要在第二页中添加jquery.min.js库链接。

<html>
<header>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>

</header>

<body >
    B
    <button id="backButton">Back</button>
    <script type="text/javascript" src="js/B.js"></script> // add the line here

</body>

</html>

为什么事件不触发（jQuery）

2 个答案: