Question

我有一个简单的按钮调用index.html内的函数，函数本身在script.js，该函数在不使用$( document ).ready(function() { //...});时有效，但只要我添加此行（在script.js），它不起作用。这是它的外观：

的index.html ：

<button onclick="myFunction()">Click</button>

带有$( document ).ready的

script.js :( 无效）

$( document ).ready(function() {
    function myFunction(){
        alert("Alright!");
    }
});

没有$( document ).ready的

script.js :( 工作）

function myFunction(){
    alert("Alright!");
}

Answer 1

Jquery使用选择器和绑定事件解决了这个问题

在此cas中，单击按钮时使用$('button').click();进行侦听。删除内联onclick

希望这会有所帮助：＆gt;

＆＃13;

$( document ).ready(function() {
    $('button').click( () => alert("Alright!"));
});

＆＃13;

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

＆＃13;

Answer 2

您必须添加一个名为jQuery的JavaScript库。因为您使用的是jQuery的语法。（丰富而强大的JavaScript库）

在Vanilla JavaScript中，我们使用document.getElementById('btnSubmit') 但是在jQuery中我们编写$('#btnSubmit')来做同样的事情。

这就是你需要使用jQuery库的原因。您可以直接从cdn使用它，也可以离线下载。

如果您想使用cdn，请添加此

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>

我们使用

在jQuery中还有一件事

$(document).ready(function(){ //your code goes here })

确保在DOM解析/渲染完成后脚本生效。

谢谢。

Answer 3

另一个选择是你可以在document.ready范围之外创建一个变量。可能不是你最好的选择，但会完成工作。

var func;                      
$(document).ready(function(){
  func= function()
  {
    alert('Alright!');
  }
});



<button onclick="func()">Click</button>

Answer 4

完成函数执行后，$( document ).ready()中的匿名函数的范围不再可用。因此无法从此范围调用该函数。

Answer 5

发生这种情况是因为当加载HTML时onClick属性被重新加载但是这个函数仍未加载。

在这种情况下，最好的方法是在就绪事件上进行绑定。

在外部js文件上使用$（document）.ready时，函数不起作用

5 个答案: