为什么我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数?

IT技术 javascript jquery javascript-events
2021-01-17 01:58:07

我是 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>
6个回答

这是因为该函数不在您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');
}
前 2 个代码,不适用于所有情况,尤其是当我们必须传递参数来区分不同元素时。
2021-03-23 01:58:07
我实际上同时做这两个,这取决于具体情况。例如,我有时使用包含 Javascript 的 .ascx 文件,当我这样做时,将函数放在内部会限制函数的范围,但有时我想要一个从多个包含调用的全局函数 - 在这种情况下,我将函数移到范围之外。因此,这两个选项都有用途。
2021-03-24 01:58:07
或将其保留在内部,但将其声明为全局函数(保持点击)
2021-04-08 01:58:07
.click 已被弃用。
2021-04-14 01:58:07

您在 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 函数中定义的点击处理程序替换,但它可以工作并且被允许

如果我把var doIt,你会是对的。省略var声明一个全局变量。
2021-03-15 01:58:07
+1 然后教我一些新的东西。这是 jQuery 功能还是适用于一般 JavaScript?
2021-03-20 01:58:07
@fearofawhackplanet 请参阅此内容以更深入地处理该主题:articles.sitepoint.com/article/orientation-programming-1/3
2021-04-02 01:58:07
@fearofawhackplanet :通用 JavaScript
2021-04-07 01:58:07
你确定这有效吗?doIt仍然在本地范围内声明。
2021-04-12 01:58:07

您需要做的是使用这样的 jquery 将“单击”事件绑定到它。

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/

@Konerak 我认为您没有抓住重点,这允许您从标记中提取 onclick 事件管理,并将其放入带有函数的 javascript 中,因此您可以将代码(行为)与标记分开,而执行功能仍然是相同 - 处理页面上元素的点击事件。
2021-03-23 01:58:07
@Mark - 我认为 @Konerak 根本没有错过这一点。该答案指出您“需要使用 jquery 将点击事件绑定到我们”那是不正确的。使用 jQuery 绑定事件是一种选择,但您不需要这样做。
2021-04-06 01:58:07

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'); }
})
$(document).ready(function() 
{ 
});

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

更好的方法是在里面为你的点击事件插入一个处理程序,然后在那里调用那个函数。

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

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

这也具有从标记中删除代码的副作用(一件好事),因为您可以从输入标签中删除该 onclick。