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()函数的工作原理

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

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

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

这是一个片段

＆＃13;

$(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++;
});

＆＃13;

[data-tracker] {
  cursor: pointer;
  color: #F00;
}

＆＃13;

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

＆＃13;

Answer 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">`)
})

Answer 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>

获取动态创建的单击javascript的元素

3 个答案: