Question

我正在jquery onready函数中编写jquery onclick事件。如果我在jquery onready函数中编写onclick函数，它会以什么方式区别执行流程？

例如：

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

  });
 jQuery("#elementid").click(function(){
  });

2.  jQuery(document).ready(function(){
    jQuery("#elementid").click(function(){
  });

  });

1和2的执行流程以何种方式不同。哪一个是使用实时的最佳方式？
提前致谢。

Answer 1

第二名更好。有时候，第一个可能不起作用，因为您可能正在选择尚未加载的元素。通过封装在文档就绪处理程序中，您可以确保在引用它们之前已加载所有页面元素。

更一般地......

// code that does not interact with DOM can go here, and will be executed
// before the has DOM finished loading.
jQuery(document).ready(function(){
  // code that needs to access the page elements/DOM goes here, and will execute
  // after the DOM has finished loading
})

Answer 2

如果在外面定义处理程序，那么#elementid选择器可能会返回一个空值 - 如果等待加载整个DOM，那么会安全的。

另一方面，您可以将处理程序委托给文档：

$(document).on('click', '#elementid', function(event){ ... });

这样，只要点击document元素，整个#elementid就会听到这个事件 - 当然这会更贵。

Answer 3

在onready中编写事件处理程序总是更安全，因为否则在将所需元素添加到dom之前可能会执行脚本

Answer 4

如果您希望在您的网页上使用某个活动，则应在$(document).ready()功能中调用该活动。这是为了确保将所有元素添加到DOM中并准备使用。

同样来自docs：

$（document）.ready（）函数比其他函数有很多优点   让事件发挥作用的方法。首先，你不必放   HTML中的任何“行为”标记。你可以分开你所有的   JavaScript / jQuery到一个单独的文件中，它更容易维护   以及它可以远离内容的方式

使用$（document）.ready（），您可以将事件加载或触发或   在窗口加载之前你想要他们做什么。一切都是如此   你坚持在它的括号内准备好尽早去   时刻 - 只要浏览器注册了DOM，就允许   一些漂亮的隐藏和显示效果和其他东西立即   当用户第一次看到页面元素时

Answer 5

在第一种情况下，在DOM准备好之前不会执行代码。

请参阅http://api.jquery.com/ready/

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

如果在位于HTML开头或标题中的script元素中执行第二个代码，则不会找到按钮元素，也不会绑定任何事件处理程序。使用.ready修复了。

将脚本放在页面底部（邻近）也会出于同样的原因解决此问题 - 在解析脚本时，HTML将转换为DOM并且您可以遍历它。

在jquery中编写onclick事件的适当位置

5 个答案: