Question

我是Javascript和jQuery的新手。我想单击一个按钮并执行js功能。（对于这个例子，它只是一个警报，但它实际上是一个ajax函数。）

出现第一个警报，但在我点击按钮后，我从未看到第二个警告（“已做”）。看起来javascript不认为单击按钮时定义了doIt（）函数。

以下是相关代码：

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>

Answer 1

这是因为该函数不在全局上下文中，而onclick=""正在寻找它。你需要把它移到你的document.ready之外（所以它不是专门用于那个闭包），或者（一种更好的方法IMO）将它绑定在document.ready里面，这就是我的意思：

将其绑定（为此删除onclick=""）：

$(document).ready(function() { 
  alert('ready');
  $("input[name='Go']").click(doIt);
  function doIt() {
    alert('did it');
  }
});

或匿名版本（再次移除您的onclick=""）：

$(document).ready(function() { 
  alert('ready');
  $("input[name='Go']").click(function() {
    alert('did it');
  });
});

或将其移到外面（保留onclick=""）：

$(document).ready(function() { 
  alert('ready');
});
function doIt() {
  alert('did it');
}

Answer 2

您可以在document.ready中将doIt定义为函数语句。

您应该使用函数表达式 或将函数声明为就绪函数。

$(document).ready(function()
{ 
    alert('ready');

    doIt = function() { //now has global scope.
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>

（是的，onClick实际上并不是jQuery的做法，可能应该由ready函数中定义的点击处理程序替换，但可以正常工作。

Answer 3

你需要做的是使用像这样的jquery将“click”事件绑定到它。

jQuery(document).ready(function($) {

    $('#my_button').click(function() {

        alert('i was clicked');

    });
});  

<input type="button" id="my_button" value="Go" />

这是一个实时的jsfiddle演示：http://jsfiddle.net/8A5PR/

以下是您的手册页：http://api.jquery.com/click/

Answer 4

Javascript有两种范围，全局和功能级别。如果在函数内声明doIt，它将在函数外部不可见。有几种方法可以解决它

//just declare the function outside the ready function
$(function() {
});
function doIt() { alert('did it'); }

//decare a variable outside the function
var doIt;
$(function() {
  doIt = function() { alert('did it'); }
});

// if you dont use var, variables are global
$(function() {
  doIt = function() { alert('did it'); }
})

Answer 5

$(document).ready(function() 
{ 
});

是document.ready的事件处理程序，该处理程序内的函数在该范围内。

更好的方法是在里面插入click事件的处理程序，然后在那里调用该函数。

$(document).ready(function() 
{  
    alert('ready'); 

  $('body input').click(function(){
    doIt();
  });
   function doIt() { 
        alert('did it'); 
    }; 
});

此ALSO具有从标记中删除代码的副作用（一件好事），因为您可以从输入标记中删除该onclick。

Answer 6

你现在正在做的只是将一个函数doIt（）放在一个（用于所有意图和目的）window.onload事件中。除非你将它绑定到一个元素，否则永远不会在document.ready之外调用此函数，因为它卡在document.ready的范围内。

您需要将您的功能移到document.ready之外，以便外部事件可以调用它。

只需一点参考资料：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Answer 7

试试这个......

$(document).ready(function() {


    alert('ready');


        $("#Go").submit(function(event) {
           alert('did it');
        });

 });

<input name="Go" id="Go" type="button" value="Go" />

Answer 8

是的，正如其他人所提到的，你真的需要在jquery ready声明之外移动该函数。另请注意，javascript区分大小写，因此您应该使用onClick而不是onclick。此致

为什么我不能使用onClick来执行jQuery $（document）.ready函数内的函数？

8 个答案: