Тег привязки с запрещенным поведением по умолчанию, не выполняющим вызов Ajax ⇐ Javascript

[Гость]

Я столкнулся с необычной проблемой в представлениях Haml, когда кликабельное изображение настраивается внутри тега привязки. Желаемое поведение — выполнить вызов Ajax при нажатии на изображение «Кнопка». Однако, несмотря на различные попытки, в том числе использование javascript:void(0) и href='', чтобы предотвратить поведение тега привязки по умолчанию, вызов Ajax не выполняется должным образом. Стоит отметить, что использование href='' приводит к нежелательной перезагрузке страницы, а использование href='#' требует первоначальной перезагрузки страницы.

Ожидаемое поведение:

При нажатии на кликабельное изображение должен выполниться вызов Ajax, ведущий к указанному действию или запросу.

Примечание: Я проверил, что вызов Ajax работает должным образом, но проблема заключается в поведении кликабельного изображения. Здесь следует также отметить, что перезагрузка URL-адреса приводит к работе Ajax-вызова/кликабельного изображения.

вот что я настроил:

%a#generic-button.button{'data-generic-id' => общий-id, :href => 'javascript:void(0);'} = image_tag('https://www.example.com/test/generic-button.svg', id: 'Общее изображение') и вызов Ajax:
$(document).on('click', '#generic-button.button', function(event) { событие.preventDefault(); var genericId = $(this).data('generic-id'); $.ajax({ URL: '/generic-action', метод: 'POST', заголовки: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') }, данные: {generic_id: genericId}, успех: функция (ответ) { если (ответ.успех) { // Здесь обрабатываем логику успеха } }, ошибка: функция() { // Здесь обрабатываем логику ошибок } }); });