关于 jquery：Javascript 在 active_admin 中不起作用

Javascript not functioning inside active_admin

所以我正在为 ActiveAdmin 表单构建一组 Markdown 助手。到目前为止，我只有一个斜体。

1
2
3
4
5

#form.html.erb
# ... some form code
<%= link_to"i","#", :class =>"btn", :id =>"italics_button" %>
<%= f.input :body %>
# ... rest of form omitted

这给了我一个 ID 为 "italics_button" 的按钮和一个 ID 为 post_body 的 textarea。到目前为止，一切都很好。

现在我有一个咖啡脚本文件来处理在给定标签中package所选文本。

1
2
3
4
5
6
7
8
9
10
11
12
13

#posts.js.coffee
wrapText = (elementID, openTag, closeTag) ->
textArea = $("##{elementID}") #select the text area
len = textArea.val().length #total length of the text area
start = textArea[0].selectionStart # start of the selected text
end = textArea[0].selectionEnd # end of the selected text
selectedText = textArea.val().substring(start, end) # The selected Text
replacement = openTag + selectedText + closeTag # string with the selected text wrapped in the bbcode
textArea.val(textArea.val().substring(0,start) + replacement + textArea.val().substring(end, len)) # perform the replacement

$('#italics_button').click (event) ->
event.preventDefault()
wrapText('post_body', '*', '*')

我相当有信心这段代码没问题，因为我从几个月前的一个项目中把它撕下来了，我在一个普通的非 AA 表单上做了同样的事情。

我已更新初始化程序以引入自定义 javascript:

1
2
3

# active_admin.rb
# rest of file omitted
config.register_javascript 'posts.js.coffee'

最后，我可以在 Active Admin 的 New Post 页面上看到，包含并编译了 javascript 文件。

但是，javascript 事件似乎没有被调用。当我单击#italics_button 时，页面会尝试跟随指向 "#" 的链接，并且 javascript 没有运行。

这将在浏览器看到它时立即执行：

1
2
3

$('#italics_button').click (event) ->
event.preventDefault()
wrapText('post_body', '*', '*')

您的 CoffeeScript 可能会加载到页面的 <head> 元素中，因此当您 $('#italics_button').click(...) 时，DOM 中可能不会有任何 #italics_button，因此不会绑定回调。

您可以尝试通常的"文档就绪时运行方法"：

1
2
3
4

$ ->
$('#italics_button').click (event) ->
event.preventDefault()
wrapText('post_body', '*', '*')

或者您可以使用"实时"处理程序：

1
2
3
4

$(document).on('click', '#italics_button', (event) ->
event.preventDefault()
wrapText('post_body', '*', '*')
)

如果 #italics_button 将在服务器将页面发送到浏览器之后动态添加，则后者将很有用。