Mouseover function ceases to function once an element is dropped

After referencing this discussion, I successfully managed to drag items from one scroll overflow to another. However, the issue arises when these items (or their clones) are in the other scroll overflow as they do not respond to .mouseover(). The goal is to enable users to delete the items in the second scroll overflow by clicking on them if they decide they no longer want those items. Any assistance with the code provided below would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.0");
    google.load("jqueryui", "1.7.2");   
    google.setOnLoadCallback(OnLoad);
    function OnLoad(){
        var dropped = false;
        $(".tag_cell").draggable({ 
            addClasses: false,
            revert: 'invalid',
            containment: '#tagFun_div_main',
            helper: 'clone',
            appendTo: '#tagFun_div_helper',
            start: function(event, ui) {
                dropped = false;
                $(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    $(this).remove();
                    console.log($(this));
                } else {
                    $(this).removeClass("hide");
                }
            }
        });
        $(".scrollbox").droppable({
            accept: '.tag_cell',
            hoverClass: 'tf_dropBox_hover',
            activeClass: 'tf_dropBox_active',
            drop: function(event, ui) {
                dropped = true;
                $.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
                ui.helper.attr("class","storeditem");
                ui.helper.attr("style","top:0px;left:0px;");
            }
        });

        $(".storeditem").mouseover(function(){
          $(this).attr("class","storeditem deleteable");
        });
        $(".storeditem").mouseout(function(){
          $(this).removeClass("deleteable");
        });

        $(".tag_cell").mouseover(function(){
          $(this).attr("class","tag_cell deleteable");
        });
        $(".tag_cell").mouseout(function(){
          $(this).removeClass("deleteable");
        });
    }
    </script>
    <style>
        div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
        div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
        div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; }
        div#tf_dropBox { display:block; width:100%; height:250px;}
        li.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
        li.tag_cell.hide { display:none; }
        ul.scrollbox {  position: relative; width: 50px; height: 70px; overflow-x: hidden; 
            overflow-y: scroll; margin-right: auto; margin-left: auto; background-color: #4C5EB6;
        }
        .scrollbox li{ position: relative; margin: 1px; background-color: #fff; z-index: 2; 
            background:#0FF; color:#fff; width: 20px; height: 20px; margin-left: auto;
            margin-right: auto; list-style: none;
        }
        .scrollbox.tf_dropBox_hover { background:#FFF !important; }
        .scrollbox.tf_dropBox_active { background:#333; }
        .deleteable{ background-color: #2EB354 !important }

    </style>
</head>
<body>
   ...
</body>
</html>

Answer №1

When you utilize the helper='clone' option, your element's events are not duplicated along with the element (specifically your mouseover event that adds the deleteable css class). I recommend replacing this line in your draggable initialization:

helper: 'clone',

with:

helper: function() {
    // Set to true to retain data and events
    return $(this).clone(true);
},

Refer to the jQuery .clone() function documentation for more details

I have created a sample jsFiddle to demonstrate this solution

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 the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...

Achieving Content Alignment Using CSS

I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen reso ...

Guide to creating a ReactJS higher-order component using modern ES6 syntax

I´m attempting to create a ReactJS higher-order component using ES6 syntax. This is what I have so far: export const withContext = Component => class AppContextComponent extends React.Component { render() { return ( ...

Utilize Bootstrap's collapsible navbar feature to smoothly navigate to a designated section of the webpage

After creating a navigation bar using bootstrap 4, I encountered an issue when trying to collapse the navbar and jump to an anchor simultaneously in mobile view. If I only include href="#services", it successfully jumps to the correct section of ...

What steps can be taken to obtain the fully computed HTML rather than the source HTML?

Is there a way to access the final computed HTML of a webpage that heavily relies on javascript to generate its content, rather than just the source HTML? For example, if a page contains script functions that dynamically generate HTML, viewing the page sou ...

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

How to prompt a nested function to refresh in Angular by using a force

As a newcomer to Angular(1.x), I am currently integrating it into the app I am working on. The app fetches user data via ajax, which includes multiple nested arrays, and then displays them using nested ng-repeat directives. Within the innermost repeat, I h ...

A guide on enabling or disabling a combobox in vuejs3

In VueJs 3, I am looking for a way to toggle the Disable/Enable status of a combo-box based on a specific property. Below is my code snippet: <template> <div class="combobox"> <label for={{selector_name}}> <p> ...

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

Posts that are repeated when making an AJAX call in WordPress

I have been experimenting with implementing a 'load more' button feature in my WordPress site. The concept is simple - users click the button, and additional posts are loaded using AJAX without the need for page reload or pagination. Following a ...

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

Permission for geolocation must be granted every time when using Safari and mobile browsers

My website requests geolocation permission but has a recurring issue. When accessed on mobile (using Chrome or Safari) or desktop Safari, the permission prompt pops up every time a page is reloaded. However, when accessing the site on a computer with Chro ...

Access the values within an array located inside a data object by utilizing ng Repeat function

Attempting to utilize ng repeat for extracting values from an array. Below is the HTML code: <ion-list ng-repeat="item in locationresult"> <ion-item > <ion-checkbox ng-repeat="innerItem in item.loc[$index]"> ...

Retrieving the value of onCheck from the Checkbox/ListItem

Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...

The script fails to execute upon the loading of the view

I am facing an issue with a simple JavaScript code that aims to target an element within an angular view: var buttons = document.querySelectorAll('.msg-type i'); console.log(buttons.length); When I run this code, it incorrectly prints out 0 on ...

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

What is the best method for calculating the total sum by multiplying the values in an array?

In my current project, I have an array consisting of multiple objects, each containing a property named "amount". My goal is to sum up all these amount values to get the total. Initially, I attempted to use a for loop but encountered an issue where settin ...

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

Is there a way for me to assign a jQuery variable to the callback function of another jQuery ajax function?

Apologies if my terms are incorrect, but I have a PHP function that I need to integrate with AJAX in order to retrieve a value for a jQuery variable. Currently, I have successfully received the AJAX callback and now I want to assign the response value to ...