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

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

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

Answer 3

删除这里的箭头功能

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

受重播的问题

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

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

3 个答案: