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.

回答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>

回答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>

回答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>

来源：https://stackoverflow.com/questions/50831482/get-dynamically-created-element-that-was-click-javascript

标签

javascript

jquery