Rails, Turbolinks и spinner

Question

Я пытаюсь заменить текстовую ссылку на счетчик при нажатии. У меня есть это:

$(document).on('page:fetch', function(e) { 
    $('.spinner').replaceWith("<img src='<%= asset_path('layout/spinner.gif') %>'>"); 
}); 

Но очевидно, что все ссылки с классом .spinner получаются с помощью счетчика. Я хочу заменить только на , нажав ссылку и только если он имеет класс spinner.

Любые предложения?

Answer 1

У вас будет код, который запускается на обеих страницах: загрузка и готовые события, чтобы они работали для загрузки полной страницы и загрузки страниц Turbolinks. В приведенном ниже коде будет добавлен атрибут «data-click» со значением true на «.spinner», который был нажат.

#inside both the ready and 'page:load' events 
$('.spinner').on('click', function(e) { 
    $(this).attr('data-clicked', true); 
}); 

ниже код будет искать «.spinner» с атрибутом данных клики со значением истины и применить вращатель изображение на нем.

$(document).on('page:fetch', function(e) { 
    $('.spinner[data-clicked="true"]').replaceWith("<img src='<%= asset_path('layout/spinner.gif') %>'>"); 
}); 

Дайте мне знать, если это поможет.

Answer 2

Используйте на события мыши, чтобы изменить связи с spinner класса, так что, когда они щелкают, они превращаются в блесны:

$('.spinner').on("click", function() { 
    $(this).replaceWith("<img src='<%= asset_path('layout/spinner.gif') %>'>"); 
}); 

Тогда, только те, которые кликали будут изменены.