Determine who the creator of the clicked div is

Question

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question:

names.push(newName);
var strName = newName;
var newName = document.createElement('p')
newName.setAttribute('id', newName);
document.body.appendChild(newName);
newName.innerText = strName;
$(newName).css('position','absolute')
$(newName).css('top', y);
$(newName).css('left', x);
updateXY();

When a user creates a new div with a custom name, everything works as expected. However, I am struggling to figure out how to detect when a user-clicks on any of these dynamically created and named divs.

For instance:

If a user creates divs named 'hello' and 'goodbye', I can't simply use $('#hello').click(function() {}); because I won't know which specific div the user chose to create.

Additionally, the array names contains the names of all the created divs, in case that information is helpful. Any assistance on this matter would be greatly appreciated. Thank you.

javascript jquery html css arrays

Answer 1

Answer №1

To make the element interactive, attach an event listener to it just like you would when adding styles:

 $(newName).on("click",function(){
   console.log("element "+$(this).text()+" clicked");
 });

Check out the demo on JSFiddle

Alternatively, you can use JS's addEventListener() method:

newName.addEventListener("click",function(){});

View the example on JSFiddle

For older browsers, you can also use the traditional way of adding click events with onclick:

newName.onclick = function(){};

See the implementation on JSFiddle

Answer 2

To make the element interactive, attach an event listener to it just like you would when adding styles:

 $(newName).on("click",function(){
   console.log("element "+$(this).text()+" clicked");
 });

Check out the demo on JSFiddle

Alternatively, you can use JS's addEventListener() method:

newName.addEventListener("click",function(){});

View the example on JSFiddle

For older browsers, you can also use the traditional way of adding click events with onclick:

newName.onclick = function(){};

See the implementation on JSFiddle

Answer 3

Answer №2

Here is an example of how you can achieve this:

$(newName).on("click",function(e){
    // 'e' represents the click event, we can use e.toElement to find out which element was clicked
    var $thisDiv = $(e.toElement);
    // perform actions on $thisDiv
});

Answer 4

Here is an example of how you can achieve this:

$(newName).on("click",function(e){
    // 'e' represents the click event, we can use e.toElement to find out which element was clicked
    var $thisDiv = $(e.toElement);
    // perform actions on $thisDiv
});

Answer 5

Answer №3

Once a div element is created, the next step is to activate the 'click' event on it.

<a class="js-create-div" href="#">Click to Create Div</a>

$(document).ready(function(){
    function initiate(){
      var freshDiv = $(".js-user-div").not(".js-inited");

      freshDiv.on("click",function(){

        alert($(this).html());

      });

      freshDiv.addClass("js-inited");
    }

    $(".js-create-div").click(function(){
    $("#wrapper").append("<div class='js-user-div'>"+Math.random()+"</div>");        
    initiate();
  });
});

Access the JSFiddle link for a visual demo

Answer 6

Once a div element is created, the next step is to activate the 'click' event on it.

<a class="js-create-div" href="#">Click to Create Div</a>

$(document).ready(function(){
    function initiate(){
      var freshDiv = $(".js-user-div").not(".js-inited");

      freshDiv.on("click",function(){

        alert($(this).html());

      });

      freshDiv.addClass("js-inited");
    }

    $(".js-create-div").click(function(){
    $("#wrapper").append("<div class='js-user-div'>"+Math.random()+"</div>");        
    initiate();
  });
});

Access the JSFiddle link for a visual demo

Determine who the creator of the clicked div is

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

How can str_replace be used in an array?

Is the behavior of undefined different in Chrome?

What is causing TypeScript to compile and remove local variables in my Angular base controller?

What could be causing the issue with the variable appearing as undefined in

AJAX - Retrieving the server response following a page change by the user

Adjusting mesh rotation on elliptical curve using mousewheel scrolling

What causes variations in the output of getClientRects() for identical code snippets?

What is the technique for causing this element to move in reverse?

What are the steps involved in generating and implementing dynamic hierarchical JSON data structures?

Using Perl's regular expressions to perform substitutions

react-widgets: deciding on the return value for the onSearch function in Multiselect

Emphasizing a full row within a table is a way to draw attention

React - The issue with my form lies in submitting blank data due to the declaration of variables 'e' and 'data' which are ultimately left unused

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I attempted to establish a connection between my backend and the MongoDB database, however, an error was displayed

Retrieve information from a PHP file using AJAX when the output is just a single line

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Using Object.create to establish multiple prototypes in JavaScript

Ways to eliminate white space in bootstrap CSS menu bar