CODEWITHSUNDEEP
javascriptjquery
Peck3277
Peck3277

Reputation: 1423

Get dynamically created element that was click javascript

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.

Upvotes: 1

Views: 1769

Answers (3)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3854

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>

Upvotes: 3

tung yu
tung yu

Reputation: 94

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>

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 10148

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>

Upvotes: 1

Related Questions