javascript - 将点击事件和参数绑定(bind)到div?

标签 javascript jquery

所以我确信这是一个非常简单的解决方案,但由于某种原因我无法找到有效的解决方案。

我有一个克隆的 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/

相关文章:

javascript - "ctrl"在指令的 LINK 中未定义

javascript - 如何使用 jQuery 更改动态加载的外部 HTML 文件的 CSS 属性

javascript - 砌体不在浏览器调整大小时重新加载元素

javascript - Instagram API 的用户 obj 问题

javascript - 在 jquery 单击事件上打开和关闭边框半径

javascript - 半透明的深色 mask /覆盖整个屏幕,除了 <nav> 当聚焦于 <nav> 内的元素时?

javascript - 使用 FCKeditor 插件添加自定义 editorarea CSS

javascript - 将 div 拆分为两部分并将内容加载到下半部分

javascript - 选择选项的格式错误 - JQuery

jquery - 使用 jquery ui 进度条进行文件上传