Sometimes onblur is triggered repeatedly, other times it doesn't fire at all

Currently, I am developing an interactive web application that is accessible at (login: [email protected], password: demo). This application allows users to move items from the left column to the workspace on the right, where they can resize and edit them as needed.

While working on the text editing feature for the objects today, I encountered some unexpected behavior that I am struggling to identify the root cause of. Specifically, when you click on a text field to edit the text and then click outside the textbox, an alert message is triggered. However, if you click on the same text field and then outside of it again, the alert message repeats multiple times. This repetitive firing of the "blur" event handler is perplexing me. I am not very familiar with Firebug or Chrome's debugging tools, especially when it comes to more subtle functionalities that could help me troubleshoot this issue.

Furthermore, there is another perplexing issue related to clicking on an object's image. If the object contains both text and an image, clicking on the image does not trigger the alert at all. In other words, the "blur" event handler does not fire unless you interact with a part of the object other than the image. This behavior is quite baffling, and I am unsure of the reason behind it.

Below is the snippet of code (utilizing jquery) that includes the event handler for the "blur" event:

var jqSelector = "#mesh div.mesh-obj span";
        $(document)
            .on("mouseover mouseenter", jqSelector, function(event) { 
               // code for mouseover and mouseenter
            })
            // other event handlers
            .on("click", jqSelector, function(event) { 
                // code for click event
                // handling of blur event
            });

I am seeking assistance in resolving these issues. Any help is greatly appreciated. Thank you!

Answer №1

Every time the user clicks on the text area, a new blur event is added instead of overriding the old one. This results in multiple blur events being attached to the text area.

Answer №2

To re-add an event handler, follow these steps:

                  jqTextarea
                    .show()
                    .text(jqSpan.text())
                    .val(jqSpan.text())
                    .css('background-color','#ff9')
                    .off('click mousedown dblclick')
                    .on('click mousedown dblclick', function(event){ event.stopPropagation(); })
                    .off('blur') // remove event listener
                    .on('blur', function(event){
                        event.stopPropagation();
                        jqSpan.text(jqTextarea.val());
                        jqTextarea.hide();
                        jqPre.css('visibility','visible');
                        alert('blur');
                    })
                    .focus();

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

Learn how to call JavaScript code from an HTML file using Ajax

I am encountering an issue with my website. The index.html page contains JavaScript code that triggers an AJAX request to show the content of other.html inside a div in index.html. However, despite the other.html loading correctly, the JavaScript code wit ...

Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file: @font-face { font-family: "Akrobat-Regular"; src: url('/assets/Akrobat-Regular.otf') format("truetype"); } body { color: #1c1c1c ...

Control the playback of individual HTML5 audio elements using jQuery for seamless user experience

How can I modify the code to ensure that only one HTML5 audio element plays at a time? Currently, all tracks are able to play simultaneously. I am using jQuery for play and pause functionalities. If one track is playing and another is clicked on, how can ...

Can you explain the distinctions between Rundeck and Quartz in terms of their job scheduling capabilities?

In my quest for a job scheduler compatible with both node.js and Rundeck, I stumbled upon Quartz. However, despite my efforts to grasp the differences between Quartz and Rundeck, I find myself at a loss. Any assistance on this matter would be immensely a ...

A method for dividing a string into separate characters and organizing them into an array of JSON objects

I have a collection of JSON objects with a fixed key 'type' and additional keys based on the type. Here is an example of how it looks: theArray = [ { "type": "text", "text": "= SUM(" ...

Adjustable Greybox Overlay Resizes Window Dimensions

Utilizing greybox on my business website allows users to easily log in and access their accounts. View an example of my site However, when the login or sign up window is activated at the top of the page, the page or window size changes, causing scroll bar ...

Having trouble scrolling with Selenium WebDriver and JavaScript Executor

Can you help me locate and click on the 5th element in this list? The following is a list of all the rooms stored: @FindBy(xpath="//p[@class='css-6v9gpl-Text eczcs4p0']") List<WebElement> placeListings; Code to click on t ...

Incorporating the Material UI App Bar alongside React Router for an enhanced user

For my web development course project, I am venturing into the world of JavaScript and React to create a website. Utilizing Material UI's appbar for my header design, I have successfully incorporated react router to enable navigation on my site. Howev ...

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

Vue JS Issue: Button click does not trigger tooltip update

I am currently utilizing Vue 3 alongside Bootstrap 5.2. In my project, I have successfully implemented a tooltip by the following method: App.vue <script> import { Tooltip } from "bootstrap"; export default { mounted() { Array.from( ...

Animate the parent container of ng-view in Angular by targeting an element within ng-view

Are you able to use CSS animations to animate a div's background color that is located outside of the ng-view, while using a directive on a $state within the ng-view? The ng-view already has CSS animations for routing. When I try to add animation cl ...

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page. <div id="outer"> <div ...

Is it possible to use wildcards in Socket.io rooms or namespaces?

The hierarchy I am working with is as follows: Store -> Manager -> Assistant In this setup, a Manager has access to everything that the Assistant sends, while the Assistant can only access what the Manager explicitly provides. My understanding is t ...

Using AngularJS to add external scripts to partials with ng-include

Why won't my main javascript files (located in index.html) work in the partials (such as page1.html)? For example, jQuery and syntax highlighting scripts are not functioning properly when I click on my menu items. HTML CODE: <div data-ng-controll ...

The React loader fails to function properly when used with nested routes

I'm currently working on my App.js file where I have defined all the routes for my application. I wanted to implement React-Router data loader functionality. import React from 'react' import { Routes, Route, Navigate, RouterProvider, createB ...

Utilizing jQuery UI to Dynamically Populate Content from a MySQL Database

I am currently working on setting up multiple autocomplete fields on a webpage. I have successfully implemented two of them, one using a local array as the data source and another utilizing a page named search.php. However, I am encountering an issue with ...

recurring issues with time outs when making ajax requests

During the development of my website, I tested it as localhost. Now that it's nearly complete, I switched to using my local IP address and noticed that about 30% of my ajax calls result in time out errors or 'failed to load resource errors'. ...

Navigating the complexities of Ajax and progressive enhancement: a helpful guide

I am creating a website using CakePHP and jQuery that I want to make ajax-friendly while ensuring accessibility for all users. I am exploring progressive enhancement to achieve this goal. In my beforeRender() function, I have a simple code snippet that is ...

Animating with CSS3 triggered by JavaScript

Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degr ...