Get dynamically created element that was click javascript

Question

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.

Krzysztof Janiszewski · Accepted Answer · 2018-06-13 08:28:21Z

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>

I think, it would be better to use var targetName = $(this).data('tracker') || $(this).attr('data-tracker');
$(this).data('tracker') would surely work, no need to use .attr()
@Alexander It depeneds. If you change value of data-tracker in js, and then again check the value those two functions will return different output. .data() will return stored value (original) and .attr() will return changed value.
My idea is to set higher priority to .data('tracker') value, and if the value is null or undefined, then get value from .attr('data-tracker'). I don't enforce, this is your post ;)
@Alexander sure, I know how || works. The difference is minor actually, maybe indeed your idea is better :)

Muhammad Usman · Accepted Answer · 2018-06-13 07:44:10Z

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>

tung yu · Accepted Answer · 2018-06-13 07:51:36Z

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>

Collectives™ on Stack Overflow

Get dynamically created element that was click javascript

3 Answers 3

10 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Linked

Related