I am encountering an issue with my ajax function where it is being triggered multiple times upon click instead of just once.
$(document).on('click', '.newGameItem', function() {
console.log('start click event');
var apiUrl = $(this).attr('data-api-string');
var callType = $(this).attr('data-api-post-call');
var apiKey = $(this).attr('data-api-key');
var dataType = $(this).attr('data-api-data-type');
var returnValue = $(this).attr('data-return-value');
var currentGameWrapper = $(this).parent().parent().parent();
console.log('before api call');
getNewItem(apiUrl, callType, apiKey, dataType, returnValue, currentGameWrapper);
console.log('after api call');
});
The click event mentioned above is nested within a turbolinks load event:
$(document).on('turbolinks:load', function() { ... }
I added a console.log at the beginning of the turbolinks load event and verified that the JavaScript file is executing 3 times. This behavior occurs when I navigate to another page from this one and then return using the back button, but it also happens when I access the page from different parts of the application.
This particular file is compiled through the asset pipeline and we have data-no-turbolink on the body tag, although it doesn't seem to have any effect.
Does anyone have insights into why this is happening or suggestions on how to address it? Unfortunately, completely removing turbolinks from my application is not currently feasible for me.
Thank you