CoffeeScript中$(document).ready等效写法及页面方法失效修复求助

你遇到的问题核心其实不是$(document).ready的写法不对，而是事件处理的顺序出了问题——别担心，我们很快就能修复它！

首先明确：CoffeeScript里$(document).ready()的等价写法是完全没问题的，$ ->或者jQuery ->都可以正确替代原生JS的$(document).ready(function(){})，你之前用的jQuery ->本身是正确的。

问题出在**event.preventDefault()的位置**！你之前的无效CoffeeScript代码里，把阻止默认行为的操作放在了最后，这会导致浏览器先执行了元素的默认行为（比如链接跳转、表单提交），你的DOM逻辑还没跑完页面就已经刷新了，所以看起来必须刷新后代码才生效。

正确的CoffeeScript代码 #

$ ->
  $(document).on 'click', '.add_fields', (event) ->
    event.preventDefault() # 先阻止默认行为，再执行后续逻辑
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))

如果你的项目里为了避免$冲突，习惯用jQuery别名，也可以这么写：

jQuery ->
  jQuery(document).on 'click', '.add_fields', (event) ->
    event.preventDefault()
    time = new Date().getTime()
    regexp = new RegExp(jQuery(this).data('id'), 'g')
    jQuery(this).before(jQuery(this).data('fields').replace(regexp, time))

关键修复说明 #

• 调整event.preventDefault()的位置：把它放在事件处理函数的最开头，确保浏览器在执行任何DOM操作前就取消默认行为，这样你的代码逻辑才能完整执行，不需要刷新页面就能触发。
• 保持CoffeeScript的缩进规范：CoffeeScript完全依赖缩进区分代码块，确保每个层级的缩进一致（推荐用2个空格），避免语法解析错误。

内容的提问来源于stack exchange，提问作者Augusto Carmo