Question

在我的html中，我有一个大约有25个缩略图的屏幕，每个缩略图都有一个类似按钮的格式：

<input type="button" class="btn btn-primary btn-small" id="likeBtn" data-id="545206032225604" value="Like">

每个图像的data-id不同。

我们的想法是使用该id向facebook图形API发出POST请求，就像帖子一样。

我有一个像这样的事件监听器：

$('#likeBtn').click(function () {
    facebook.likePhoto(controller.likeReady);
});

我遇到的问题是我不确定如何从实际点击的元素中获取该数据ID。

如果我能提供更多信息，请告诉我。

由于

Answer 1

使用.data()

$('#likeBtn').click(function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

阅读this

Id属性必须是唯一的。使用类来代替。

更改HTML

使用课程likeBtn代替身份likeBtn，因为您说有很多这样的按钮。

<input type="button" class="btn btn-primary btn-small likeBtn" data-id="545206032225604" value="Like">

不，你的js变成了

$('.likeBtn').click(function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

阅读Two HTML elements with same id attribute: How bad is it really?

OP发表评论后更新

使用.on()

由于元素是动态添加的，因此无法将事件直接绑定到它们。因此，您必须使用Event Delegation。

$(document).on('click','.likeBtn',function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

语法

$( elements ).on( events, selector, data, handler );

Answer 2

试试这个：

$('#likeBtn').click(function () {
    var dataId = $(this).prop('data-id');
    console.log(dataId); //or do something else

    facebook.likePhoto(controller.likeReady);
});

但是，如果我理解正确，你是否有多个id为像？

的元素？

Answer 3

$('#likeBtn').click(function () {
   var id;

   id = $(this).attr('data-id');
   facebook.likePhoto(controller.likeReady);
});

点击元素的抓取属性 - 使用click事件处理程序

3 个答案: