为何jQuery .click()直接绑定无效 传入函数调用才生效？

核心错误是$(document).ready()及其简写$()的参数传递不符合API要求：

• 上述两个方法的合法入参必须是函数引用，jQuery会在整个DOM树解析完成后，才执行传入的函数，保证执行DOM操作时对应元素已经存在。
• 你写的前两种实现，是直接将$("#addPosition").click(...)这段代码作为入参传入，这段代码会在JS解析到当前行时立刻执行，不会等待DOM加载。如果你的script标签放在#addPosition元素的HTML代码之前，执行绑定逻辑时按钮还未渲染到DOM中，jQuery无法选中目标元素，事件自然绑定失效。
• 传入回调的.click()方法返回值是jQuery对象，不是函数，相当于你给ready传入了一个无效参数，根本没有注册DOM加载完成后的执行回调。
• 第三种写法生效的原因是，你传入的doPosition是纯粹的函数引用，jQuery会在DOM就绪后才调用这个函数，此时按钮已经渲染完成，选择器可以正常命中元素，事件绑定成功。

将事件绑定逻辑包裹在匿名函数中，作为回调传入$(document).ready()或简写的$()即可。

第一种写法修正后：

$(document).ready(function() {
  $("#addPosition").click(function(event) {
    console.log("I'm in HTML .ready()");
    event.preventDefault();
  })
})

第二种写法（ready简写形式，开发中更常用）修正后：

$(function() {
  $("#addPosition").click(function(event) {
    console.log("I'm in HTML $()");
    event.preventDefault();
  })
})

额外说明：如果把JS代码写在页面所有DOM元素的最末尾，即使不用ready包裹，直接执行$("#addPosition").click(...)也能正常绑定，因为代码执行时元素已经完成渲染。但日常开发中统一用ready包裹DOM操作逻辑是更稳妥的实践，不需要依赖script标签的放置位置。

内容的提问来源于stack exchange，提问作者Jose Constenla