'这个'在javascript中，如何在我的情况下使用它？

Question

我以这种方式动态构建dom元素

let constructTrack = (track) =>{
let trackElement = `
        <div class="small-4 columns custom-columns trackCardContent track-card-labels text-right">
            <i data-trackID="${track.trackID}" class="material-icons custom-btn view-track-details-btn">open_in_new</i>
            <i data-trackID="${track.trackID}" class="material-icons custom-btn edit-track-details-btn">mode_edit</i>
            <i data-trackID="${track.trackID}" class="material-icons custom-btn delete-track-btn">delete</i>
        </div>
    `
return trackElement;
}

并试图以这种方式分配点击监听器

let assignListeners = () =>{
$('.view-track-details-btn').on('click', () =>{
   console.log('view track clicked');
   let id = $(this).data('trackID'); //IS THIS PROPER WAY TO USE 'THIS'
   console.log(id);
});
}

由于会创建多个dom元素，我将“on-click listener”分配给'class'，然后我想使用'this'并访问数据破折号值，但我得到它未定义，请建议我如何使用'this'或建议我任何其他方式来处理这个问题...（我不想在点击监听器上添加个别动态创建的每个dom元素，因为它不是一个好的做法）提前感谢你。

Answer 1

$('.view-track-details-btn').on('click')将在执行时为所有现有元素添加一个单击侦听器。

你应该在DOM对象上附加所有匹配元素的监听器，如下所示：

$(document).on('click', '.view-track-details-btn'...无论元素是如何生成或何时生成的，它都将始终有效

是的，$(this)在这种情况下是正确的

Answer 2

通过删除箭头功能在这里

$('.view-track-details-btn').on('click', () =>{
     console.log('view track clicked');
     $(this).attr("data-trackID");//change this
     console.log(id);
});

并使用常规功能

$('.view-track-details-btn').on('click', function(){
     console.log('view track clicked');
     $(this).attr("data-trackID");//change this
     console.log(id);
});

问题解决了

这是因为箭头函数覆盖了上下文

Answer 3

使用attr（）获取值。试试这个

$('.view-track-details-btn').on('click', () =>{
   console.log('view track clicked');
   var id = $(this).attr("data-trackID");//change this
   console.log(id);
});