Get dynamically created element that was click javascript

20
June 13, 2018, at 3:20 PM

I'm trying to track what buttons users click via javascript/jquery. I have the following code

$(document).on('click', '[data-tracker]', function( event ) {
    var target = event.target;
    var targetName = $(target).data('tracker');
    console.log(targetName);
});
<button data-tracker="test1">test1</button>
<i data-tracker="test2">test2</i>
<img data-tracker="test3">

At the moment this works as I want it to. When someone clicks on an element on the page that has the data-tracker attribute I log the value in the console.

I'm using datatables on some pages which dynamically creates elements from json returned from the server. I can't figure out how to record elements that have been dynamically created.

So all in all I want 1 function that will check if a user clicks on an element with the data-tracker attribute and output it's value to the console.

Answer 1

First of all instead of something like this

$(document).on('click', '[data-tracker]', function( event ) {
    var target = event.target;
    var targetName = $(target).data('tracker');
    console.log(targetName);
});

You can do this

$(document).on('click', '[data-tracker]', function() {
    var targetName = $(this).data('tracker');
    console.log(targetName);
});

Secondly, the reason of this behavior may be because .data() function works that way

Store arbitrary data associated with the specified element. Returns the value that was set.

So when you dynamically add an element with attribute data-tracker there is no value set because it was not stored. So instead of using .data() just use .attr().

$(document).on('click', '[data-tracker]', function() {
    var targetName = $(this).attr('data-tracker');
    console.log(targetName);
});

Here is a snippet

$(document).on('click', '[data-tracker]', function() { 
  console.log($(this).attr('data-tracker')); 
}); 
 
var num = 0; 
 
$("#addElement").on('click', function() { 
  $("<div>").attr('data-tracker', 'test value ' + num).html('Test value' + num).appendTo(".content"); 
  num++; 
});
[data-tracker] { 
  cursor: pointer; 
  color: #F00; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="addElement">Add element</button> 
 
<div class="content"> 
  <div data-tracker="value1">Value 1</div> 
  <div data-tracker="value2">Value 2</div> 
  <div>Test</div> 
  <div data-tracker="value3">Value 3</div> 
  <div data-tracker="value4">Value 4</div> 
</div>

Answer 2

Your code looks OK to me. You are probably making some mistake when added elements with JSON, make sure you get that correct.

Here I've added a button to add elements to the page dynamically, you can verify

$(document).on('click', '[data-tracker]', function( event ) { 
 
    var target = event.target; 
    var targetName = $(target).data('tracker'); 
 
    console.log(targetName); 
}); 
 
$("#new").click(function(){ 
   $("#d").append(`<button data-tracker="test1">test1</button> 
<i data-tracker="test2">test2</i> 
<img data-tracker="test3">`) 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div id="d"> 
<button data-tracker="test1">test1</button> 
<i data-tracker="test2">test2</i> 
<img data-tracker="test3"> 
</div> 
<br/> 
<button id="new">Add</button>

Answer 3

I am assuming the data-tracker is a class name. And here is a example of how you adding a onclick event to all element with the same class name

a = document.getElementsByClassName("data-tracker") 
 
for (var key in a) { 
    if (a.hasOwnProperty(key) && Number.isInteger(parseInt(key))) { 
        a[key].addEventListener("click", function(){console.log('hi')}); 
    } 
}
<input type="button" class="data-tracker" value="button1"></input> 
<input type="button" class=""  value="button2"></input> 
<input type="button" class="data-tracker" value="button3"></input>

READ ALSO
Override document.write

Override document.write

I'm trying to override documentwrite so i will be able to take the raw html parse it make some manipulations on the code and return the call

32
Accessing Object inside Array

Accessing Object inside Array

I'm trying to access values inside Firebase array > object

15
Use anchor element without href to toggle &ldquo;hidden&rdquo; attribute of separate element (div), without JavaScript

Use anchor element without href to toggle “hidden” attribute of separate element (div), without JavaScript

I've been browsing with JS disabled in my browser lately, out of curiosity to see how some sites handle it, and found some functionality on one site in particular that doesn't seem like it would be possible, based on what I know

39