Disappearing event listener issue triggered by arrow button click

As I work on customizing a WordPress plugin called Spider Calendar, I've encountered an issue where the event listener disappears from the inspector's "event listeners" tab after clicking on certain elements like "2016", "2018", or the arrows. Despite this, the event listener still appears in the source code.

After conducting some research, my hunch is that this vanishing act might be due to the elements being destroyed. How can I ensure the event listener reloads each time the calendar is triggered? Alternatively, could there be another underlying cause that I'm missing?

Below is the snippet of my event listener code:

if (window.location.href.indexOf("bounce-houses/") > -1) {
  var element = $('#afterbig1 table table table tr:nth-child(n+2) td');
  element.click(function() {
    if ($(this).is(":nth-last-child(2)") || $(this).is(":last-child") || $(this).is(":first-child")) {
      $(this).toggleClass("selectedWeekend");
      if ($(this).hasClass("calsun_days")) {
        $(this).toggleClass("sundays");
        $(this).toggleClass("calsun_days");
      } else if ($(this).hasClass("sundays")) {
        $(this).toggleClass("sundays");
        $(this).toggleClass("calsun_days");
      }
    } else if ($(this).is('td:nth-child(n+2):nth-child(-n+5)')) {
      $(this).toggleClass("selectedDays");
    }
  });
}
});

For reference, you can find the problematic page at the following link (please note that the calendar code is too extensive to include here):

johnabounceandplay.com/bounce-houses/combo-house

Answer №1

If your element is destroyed, any listeners will not be reattached to it upon recreation.

A simple solution is to bind the click event to a reliable element that will always be present, such as body

Please give the following code a try:


if(window.location.href.indexOf("bounce-houses/") > -1){

    $('body').on('click', '#afterbig1 table table table tr:nth-child(n+2) td', function() {
        if($(this).is(":nth-last-child(2)") || $(this).is(":last-child") || $(this).is(":first-child")){
            $(this).toggleClass("selectedWeekend");
            if($(this).hasClass("calsun_days")){
                $(this).toggleClass("sundays");
                $(this).toggleClass("calsun_days");
            } 
            else if ($(this).hasClass("sundays")){
                $(this).toggleClass("sundays");
                $(this).toggleClass("calsun_days");
            } 
        }

        else if($(this).is('td:nth-child(n+2):nth-child(-n+5)')){
            $(this).toggleClass("selectedDays");
        }
    })

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using and accessing Ajax response across all routes in an application

I am developing a Node.js Express API application that requires several AJAX calls at the start of the application for global data access in all requests. At the beginning of my app.js file, I include: var users = require('./modules/users'); I ...

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test: import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces' import { areSameActions } from '../actionsProgress' export const findActionPr ...

Displaying or concealing an HTML element based on a JavaScript XHR request function

I have a single HTML element that I need to display and hide using jQuery within a pure JavaScript XHR request method. Currently, the element always remains visible without hiding when the request is complete or successful. On error, I would like it to be ...

Using JavaScript to obtain the coordinates of a click event from a programmatically triggered click on an HTML element

Is there a way to programmatically simulate a click event on an HTML DOM element and still retrieve the screenX/screenY and clientX/clientY coordinates successfully? When manually clicking the element, the coordinates are visible in the console, but when t ...

URLs not being gathered by the web scraping tool

Currently involved in scraping data from this specific website to compile a database. Previously, I had functioning Python code available on GitHub that successfully accomplished this task. However, due to a major overhaul in the HTML structure of the site ...

When importing modules in node.js, the presence of a function can overwrite another function even if it

Within this code snippet, I am utilizing Express.js. //index.js app.use('/',routes()); //app/routes.js module.exports = function() { express = require('express'); const loggedUserProfileController = require('../controller ...

Root location for offline and pre-production in the Backbone boilerplate router

I am currently utilizing the backbone boilerplate found at https://github.com/tbranyen/backbone-boilerplate My development process involves working on static HTML/JS files offline and conducting tests offline before deploying them to another site for pre- ...

Issue with webpack failing to inject variables

I have encountered an issue while using the npm package got, which I am importing into one of my components. Strangely, when I run everything through Webpack, Safari is the only browser showing the error message: SyntaxError: Unexpected keyword 'cons ...

Dealing with Errors in AJAX using FluentValidation with .NET Core

How can I handle errors in FluentValidation when using form post with AJAX / jQuery? Here is my JavaScript: function Create(controlId: any) { var control = $('#' + controlId); var controller = control.data('controller'); v ...

Working with ReactJs: Passing Parameters to Second Function

Currently, I am utilizing React-Bootstrap and looking to implement tooltips without creating multiple functions. Instead, I am using the second parameter to change the text of tooltips. However, I am encountering an issue where the function is interpreting ...

Is there a way to enable multiple selections in a particular section?

Currently, I am in the process of working on my step by step order and I want to express my gratitude for all the assistance I have received so far. Despite the help, I still have some unanswered questions! The steps in my project are categorized into dif ...

"An intermittent error is occurring with the jQuery webcam plugin, where a TypeError is being thrown stating that

Many times, I encounter the error stated in the subject line. The code snippet where this error occurs is within the else section of the function below: if ($('#clicktosnap').is('.disabled')) { alert ("Please enable the camera first, ...

Exploring smooth scrolling functionality using AngularJS and integrating it with IFrames

After implementing an angular controller, I included the following code: angular.element(document).ready(function () { ... } Within this setup, I added a function to enable smooth scrolling to the hash of window.location.hash using .animate({scrollTop... ...

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

Save the output of my Java function into a JavaScript variable

I have created a web application using JSP, CSS and HTML. The page contains six buttons, each of which calls a JavaScript method. For instance, the first button triggers the par() method. <html> <head> <title>Welcome d To Student Unive ...

Content in tab remains stagnant

I am having trouble creating different tabs on a page with unique content in each tab's body. Whenever I click on a new tab, the body content remains the same. I'm not sure if it's an issue with how the tabs are set up in the HTML or if ther ...

Tips for updating a section of a webpage without the need to redirect to a different page: use technologies such as Express, Nodejs, and M

In the midst of developing a two-player game where one player must guess a word within 10 tries, I find myself facing a challenge. I need to display the player's guesses and scores in a table without refreshing the entire page. Unfortunately, my exper ...

What are the most effective techniques for managing headers, footers, and reusable templates in Node.js/Express views?

Currently, I've got my development environment configured with Node.JS / Express / Pug and I'm in the process of grasping the usage of views & routes. However, I seem to be struggling when it comes to embedding a "reusable" navigation bar and foo ...

Is there a sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...