The mousedown event does not seem to function properly on dynamically added text elements

Question

The mousedown event does not seem to function properly on dynamically added text elements

When two texts are enclosed in p tags, my goal is to create an interactive function where clicking on one text causes it to move slightly and the other text to be temporarily deleted. However, when the deleted text is re-added after clicking on the first text again, the mousedown function stops working. It's worth noting that the mousedown event only works on the initially clicked text/tag upon page load, making it the only clickable element.

$(document).ready(function() {
    
    var upPoBool = false;
    
    //first part
    $('#firstPart').mousedown(function() {
        if(upPoBool == false){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            //delete second part
            $("#secondPart").remove();
            
            upPoBool = true;
            
        } else if(upPoBool == true){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            $('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');

            upPoBool = false;
        }

    });
    
    var upBaBool = false;
    
    //second part
    $('#secondPart').mousedown(function() {
        if(upBaBool == false){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");
            
            //delete first part
            $("#firstPart").remove();
            
            upBaBool = true;
            
        } else if(upBaBool == true){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");

            $('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
            
            upBaBool = false;
        }

    });
    
});

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}


#firstPart{
    position: absolute;
    top: 2rem;
    
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    
    z-index: 100;
}

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

The tags do not overlap, so adjusting the z-index does not have any effect. I even tried placing them in separate divs but encountered the same issue.

javascript html jquery css mousedown

Answer 1

Answer №1

The removal of an element from the DOM also removes any bound events, including the mousedown event. This means that you will need to re-add the mousedown event after recreating your element.

Here is a solution for addressing this issue:

$(document).ready(function() {
    let upPoBool = false;
    let upBaBool = false;

        const firstPartHandler = () => {
        if(upPoBool == false){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            //delete second part
            $("#secondPart").remove();
            
            upPoBool = true;
        } else if(upPoBool == true){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            $('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');
                    $('#secondPart').mousedown(secondPartHandler);

            upPoBool = false;
        }
    }

        const secondPartHandler = () => {
        if(upBaBool == false){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");
            
            //delete first part
            $("#firstPart").remove();
            
            upBaBool = true;
        } else if(upBaBool == true){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");

            $('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
                    $('#firstPart').mousedown(firstPartHandler);
            
            upBaBool = false;
        }
    }
    
    //first part
    $('#firstPart').mousedown(firstPartHandler);
    
    //second part
    $('#secondPart').mousedown(secondPartHandler);
});

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}


#firstPart{
    position: absolute;
    top: 2rem;
    
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    
    z-index: 100;
}

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

An alternative solution could be to hide the elements instead of removing them. Here is an example:

$(document).ready(function() {
    let activeItem = null
    
    $('#testingDiv p').mousedown(function() {
        if (!activeItem) {
            $('#testingDiv p').not(this).hide()
            $(this).addClass('active')
            activeItem = $(this)
        } else {
            $('#testingDiv p').show()
            $(this).removeClass('active')
            activeItem = null
        }
    });
});

.active {
    margin-left: 5rem;
}


#firstPart {
    position: absolute;
    top: 2rem;
    z-index: 101;
}

#secondPart {
    position: absolute;
    top: 4rem;
    z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ClickTestFAQ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <p>Something test:</p>
      <div id="testingDiv">
          <p id="firstPart">First part move</p>
          <p id="secondPart">Second part move</p>
      </div>
  </body>
</html>

Answer 2

The removal of an element from the DOM also removes any bound events, including the mousedown event. This means that you will need to re-add the mousedown event after recreating your element.

Here is a solution for addressing this issue:

$(document).ready(function() {
    let upPoBool = false;
    let upBaBool = false;

        const firstPartHandler = () => {
        if(upPoBool == false){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            //delete second part
            $("#secondPart").remove();
            
            upPoBool = true;
        } else if(upPoBool == true){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            $('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');
                    $('#secondPart').mousedown(secondPartHandler);

            upPoBool = false;
        }
    }

        const secondPartHandler = () => {
        if(upBaBool == false){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");
            
            //delete first part
            $("#firstPart").remove();
            
            upBaBool = true;
        } else if(upBaBool == true){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");

            $('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
                    $('#firstPart').mousedown(firstPartHandler);
            
            upBaBool = false;
        }
    }
    
    //first part
    $('#firstPart').mousedown(firstPartHandler);
    
    //second part
    $('#secondPart').mousedown(secondPartHandler);
});

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}


#firstPart{
    position: absolute;
    top: 2rem;
    
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    
    z-index: 100;
}

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

An alternative solution could be to hide the elements instead of removing them. Here is an example:

$(document).ready(function() {
    let activeItem = null
    
    $('#testingDiv p').mousedown(function() {
        if (!activeItem) {
            $('#testingDiv p').not(this).hide()
            $(this).addClass('active')
            activeItem = $(this)
        } else {
            $('#testingDiv p').show()
            $(this).removeClass('active')
            activeItem = null
        }
    });
});

.active {
    margin-left: 5rem;
}


#firstPart {
    position: absolute;
    top: 2rem;
    z-index: 101;
}

#secondPart {
    position: absolute;
    top: 4rem;
    z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ClickTestFAQ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <p>Something test:</p>
      <div id="testingDiv">
          <p id="firstPart">First part move</p>
          <p id="secondPart">Second part move</p>
      </div>
  </body>
</html>

The mousedown event does not seem to function properly on dynamically added text elements

Answer №1

Similar questions

Retrieving a list of selected items using React Material-UI

Wait until a svelte store value is set to true before fetching data (TypeScript)

What are some effective ways to utilize localstorage efficiently?

Upon the initial rendering, the console log displays a null value for the data

Trigger functions when the window is scrolled, resized, or when the document is fully loaded

How can you prevent HTML from interpreting the characters '<' and '>'?

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

Ways to stop a named anchor from causing a line break

Comparing Canvas and CSS3 for Website Development

Need help resolving a JavaScript error while implementing ToolScriptManager for UpdatePanel in my project

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

Integrating foundation-sites with webpack, unable to apply styles

The challenge of PHP's HTTP_REFERER

blending javascript and php variables within ajax requests

Error encountered in parsing JSON: abrupt end of data (JavaScript)

Tips for Integrating a Facebook Shop Page into Your Website

Creating an array of choices using jQuery: A step-by-step guide

The functionality of $http get parameters is malfunctioning

"Uploading" a picture using jQuery

Updating coordinates on Google Maps using setTimeOut with jQuery and JavaScript