循环遍历 DOM 对象以进行点击

Question

我有 Ruby/Rails 代码，它根据数据库拉取生成一组链接。生成的链接如下所示：

<a href="/show_device_dialog" id="show_device_dialog_1">Call Customer 1</a> 
<br />
<a href="/show_device_dialog" id="show_device_dialog_28">Call Customer 28</a> 
<br />

当用户单击链接时，我想弹出一个对话框以在继续之前验证几个选项。为此，我正在尝试使用 UJS 捕获“点击”事件。我所做的是使用包含“show_device_dialog_”的“id”解析“A”对象的内容，然后尝试将一个函数挂钩到它们以弹出对话框。

现在，我对此很陌生，所以我用蛮力做了一点：

$(document).ready ->
  console.log "building show_device_dialog..."
  $("a[id^='show_device_dialog_']").each ->
    console.log "...loop..."
    @click (e) ->
      dialog_form = undefined
      url = undefined
      dialog_form = undefined
      url = undefined
      url = $(this).attr("href")
      dialog_form = $("<div id=\"dialog-form-"+@id+"\">Loading form...</div>").dialog(
        autoOpen: false
        width: 520
        modal: true
        open: ->
          $(this).load url + " #content"

        close: ->
          $("#dialog-form"+@id).remove()
      )
      dialog_form.dialog "open"
      e.preventDefault()

    console.log "...done*"

加载页面后，在控制台上我看到：

building show_device_dialog... contacts.js:3
...loop... contacts.js:5
...done* contacts.js:28
...loop... contacts.js:5
...done* contacts.js:28

这表明正在找到并处理这两个链接。但是，发生的情况是链接似乎没有与之关联的“点击”触发器。此外，会打开一个虚假的新浏览器窗口，就好像单击了其中一个链接一样。

弹出代码本身，没有多链接搜索块，可以正常工作并且经过验证可以执行我想要的操作。所以，我认为问题在于我如何处理“找到”的 DOM 对象。

有人能指出我的错误在哪里吗？

Answer 1

来自fine manual：

.each(function(index, Element))

[...] 在当前 DOM 元素的上下文中触发回调， 所以关键字this 指的是元素。

所以在您的 $("a[id^='show_device_dialog_']").each 回调中，@ 是原始 DOM 元素，而不是 jQuery 包装的版本。这意味着您正在调用 DOM 元素的 click 方法，而不是 jQuery 的。你想说：

$("a[id^='show_device_dialog_']").each ->
  console.log "...loop..."
  $(@).click (e) ->
    #...

演示：http://jsfiddle.net/ambiguous/An7CM/