Looping Through DOM Objects for Click

Question

У меня есть код Ruby/Rails, который генерирует набор ссылок на основе выталкивания DB. Полученные ссылки выглядят следующим образом:

<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 /> 

Когда пользователь щелкает Линк, я хочу, чтобы совать диалог, открытый для проверки несколько вариантов, прежде чем двигаться дальше. Чтобы сделать это, я пытаюсь захватить событие click, используя UJS. Я занимаюсь анализом содержимого объектов «A» с «id», содержащим «show_device_dialog_», а затем попытаюсь подключить к ним функцию, которая выводит диалог.

Теперь, я довольно новыми для этого, так что я делаю немного его грубой силой:

$(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 (функция (индекс, 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) -> 
    #... 

Demo: http://jsfiddle.net/ambiguous/An7CM/