Javascript 为什么不触发事件（jquery）_Javascript_Jquery

Javascript 为什么不触发事件（jquery）

javascript jquery

Javascript 为什么不触发事件（jquery）,javascript,jquery,Javascript,Jquery,我有一个主页，有两个按钮（每个按钮指的是另一个页面）： A和B（HTMLs和JSs）具有相同的行为：例如（B.html和B.js）： B B 返回 $（文档）.ready（函数（）{ log（“bjsready”）； $（“#backButton”）。单击（函数（）{ log（“单击后退按钮”）； $.get（“/back.html”），函数（数据）{ log（“获取结果”）；文件。写入（数据）； }); }); }); 当我从主页点击A或B按钮进入新页面时，我可以在控制台日志中看到A

我有一个主页，有两个按钮（每个按钮指的是另一个页面）：

A和B（HTMLs和JSs）具有相同的行为：例如（B.html和B.js）：


B
B
返回
$（文档）.ready（函数（）{
log（“bjsready”）；
$（“#backButton”）。单击（函数（）{
log（“单击后退按钮”）；
$.get（“/back.html”），函数（数据）{
log（“获取结果”）；
文件。写入（数据）；
});
});
});

当我从主页点击A或B按钮进入新页面时，我可以在控制台日志中看到A.js（或B.js）已准备就绪（因此A.js或B.js已加载），但是在它之后，如果我单击“后退”按钮，什么也不会发生（甚至连

console.log（“back button clicked”）；

行也不会被调用

为什么会发生这种情况以及如何修复？

您需要将脚本标记移动到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>

加载页面B时，您将看到按钮还不存在，因此脚本无法绑定单击事件。

试试这种方法……对我有效……您需要在第二个页面中添加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>


//加上
B
返回
//在这里添加行

这没有帮助。我在控制台login.js上看到以下警告：14解析器阻塞，跨站点（即不同的eTLD+1）脚本，通过document.write调用。由于网络连接不良，浏览器可能会在本次或将来的页面加载中阻止对此脚本的网络请求。如果在此页面加载中被阻止，将在后续控制台消息中确认。有关详细信息，请参阅。出现此问题的原因是$（文档）.ready在页面呈现之前激发，这可能是因为脚本认为页面已经准备好了，因为您刚刚用javascript更改了文档内容。为了更好地向您展示，我改进了答案。

<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);   
        });

    });

});

<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>

$(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);
    });
  });
});

<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>