Question

我使用的是mvc5。不要在测试中包含jQuery。 _Layout.cshtml：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title></title>
</head>
<body>
  @RenderBody()
</body>
</html>

Test.cshtml：

<script type="javascript/text">
  function myFunction() {
    alert("its is working");
  }
</script>
<button onclick="myFunction()">Click me</button>

结果我有一个错误：ReferenceError：myFunction未定义

和结果代码：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title></title>
</head>
<body>
  <button onclick="myFunction();">Click me</button> 
<script type='text/javascript' >
(function($){
    function myFunction() {
      alert("I am working");
    };
})(jQuery);
</script>
</body>
</html>

我已经阅读了很多关于这个错误并且没有找到答案。你能澄清一下，谁包装JavaScript代码？有没有标志要取消它？有没有其他方法可以解决这个问题？

Answer 1

某些东西（可能是MVC5）包含了你的代码，但有充分的理由。将onclick处理程序放在指向全局声明函数的元素上是JS在＃90; 90中编写的。

要解决此问题，请在按钮上添加id属性并删除内联事件处理程序：

<button id="mybutton">

然后使用jQuery注册事件处理程序：

$('#mybutton').on('click', function () {
  alert("I am working");
});

或者，由于您在后面的评论中提到您有一个生成这些元素的循环，请改为使用class和data-属性：

<button class="myclass" data-id="...">

代码：

$('.myclass').on('click', function() {
    var id = $(this).data('id');
    ...
});

Answer 2

<script>
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>

这会奏效。欢呼声

为什么要将JavaScript包装在这个“（function（$）{... JavaScript code ..}）（jQuery）;”？

2 个答案: