获取点击 javascript 的动态创建的元素答案

【问题标题】：Get dynamically created element that was click javascript获取点击 javascript 的动态创建的元素
【发布时间】：2018-06-13 16:28:21
【问题描述】：

我正在尝试通过 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 属性的元素并将其值输出到控制台。

【问题讨论】：

标签： javascript jquery

【解决方案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()函数是这样工作的

存储与指定元素关联的任意数据。返回设置的值。

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

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

这是一个sn-p

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

【讨论】：

我认为，使用var targetName = $(this).data('tracker') || $(this).attr('data-tracker');会更好
$(this).data('tracker') 肯定会工作，无需使用.attr()
@Alexander 它依赖。如果您在 js 中更改 data-tracker 的值，然后再次检查该值，这两个函数将返回不同的输出。 .data() 将返回存储值（原始），.attr() 将返回更改后的值。
我的想法是给.data('tracker')值设置更高的优先级，如果值是null或者undefined，那么从.attr('data-tracker')获取值。我不强制，这是你的帖子；）
@Alexander 当然，我知道|| 是如何工作的。实际上差异很小，也许您的想法确实更好:)

【解决方案2】：

您的代码在我看来没问题。使用JSON 添加元素时，您可能会犯一些错误，请确保正确。

这里我添加了一个按钮，可以动态的给页面添加元素，你可以验证一下

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

我假设data-tracker 是一个类名。这是一个示例，说明如何向具有相同类名的所有元素添加 onclick 事件

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>

【讨论】：