javascript - 获取动态创建的元素，点击javascript

Question

我正在尝试通过 javascript/jquery 跟踪用户点击了哪些按钮。我有以下代码

$(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">

目前这一切如我所愿。当有人点击页面上具有 data-tracker 属性的元素时，我会在控制台中记录该值。

我在一些页面上使用数据表，这些页面从服务器返回的 json 动态创建元素。我不知道如何记录动态创建的元素。

所以总而言之，我想要 1 个函数来检查用户是否单击具有 data-tracker 属性的元素并将其值输出到控制台。

Answer 1

首先而不是这样的

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

你可以这样做

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

其次，这种行为的原因可能是因为.data()函数就是这样工作的

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

因此，当您动态添加具有属性 data-tracker 的元素时，没有设置值，因为它没有被存储。所以不要使用 .data()只需使用 .attr() .

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

这是一个片段

$(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>