所以我确信这是一个非常简单的解决方案,但由于某种原因我无法找到有效的解决方案。
我有一个克隆的 div,需要向其添加点击事件。我尝试绑定(bind)到每个克隆的 div 的函数如下:
function allowLike(songId){
$('.queueTrack').off('click').on('click', function(){
console.log('clicked like');
console.log(songId);
$.getJSON('/user', function(data){
var token = data.token;
songId = songId;
$.ajax({
url: 'https://api.soundcloud.com/me/favorites/' + songId + '?oauth_token=' + token,
type: 'PUT',
success: function(result) {
console.log('u liked' + songId)
}
});
})
})
}
克隆 div 时出现问题。在克隆期间,我将 id
重置为新的,并且需要使用旧的 id
作为 allowLike(songId)
函数的参数.
我为尝试获取该 id 所做的工作如下:
var songId = this.id; //This is the id I need for the function
console.log(songId) // this logs correctly
var cloned = $(this).clone(); //cloning the div
cloned.attr("id", queueList.length - 1); //changing the div's id to a new one
$("<span class = 'soundHover'><div class='soundMove'><i class='moveUp fa fa-arrow-up'></i><i class='moveDown fa fa-arrow-down'></div></i><span class='deleteQueue'><i class='fa fa-times'></i></span></span>").prependTo(cloned); //add some stuff to the new cloned div
$(cloned).appendTo(".queueListDiv").addClass("animated flipInX, queueTrack").removeClass('track'); //add the cloned div to it's new location
allowLike(songId); //call the allowLike function to bind click event
现在,如果我克隆 div 然后单击它,效果会很好。它做的一切都很棒。当我连续克隆多个 div,然后尝试单击它们时,就会出现问题,它们都与相同的 songId
参数绑定(bind),而不是每个都有自己的参数。
有什么想法吗?
最佳答案
首先使用一个属性将名为data-songid的songID保存到元素中,就像在HTML中一样,您可以将单个id分配给元素,这样您就可以克隆元素并轻松放入 View 中,希望这有帮助,如果您仍然不清楚,请告诉我。
更多引用data attributes在这里你得到 API
关于javascript - 将点击事件和参数绑定(bind)到div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34899440/