抓斗属性点击 - 使用上的单击事件处理

在我的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。

让我知道，如果我可以提供任何更多的信息。

感谢

来源

2013-10-27 Reece

使用.data()

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

读this

Id属性必须是唯一的。使用类而不是。

改变HTML

使用类likeBtn而不是ID 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()

由于eleme后更新nts是动态添加的，因此您无法直接将事件绑定到它们。所以您必须使用Event Delegation。

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

语法

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

来源

2013-10-27 06:24:25

好了，我已经和它改为一类像上面和取出ID = “likeBtn”。但是我现在意识到我的事件处理程序甚至没有注册点击，所以代码永远不会被执行。 $（'。likeBtn'）。点击（函数（）{ \t \t VAR data_id = $（本）。数据（ 'ID'）; \t \t的console.log（data_id）; //facebook.likePhoto(controller.likeReady）; }）; 有没有什么你可以看到错误的处理程序本身，或任何想法还有什么可以造成这种情况？ – Reece

抱歉没有意识到评论会格式化得很糟糕，我的不好。 – Reece

@Reece这些像按钮是动态生成的吗？ –

试试这个：

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

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

不过，如果我理解正确的这个，你有没有用id likeBtn多个元素？

来源

2013-10-27 06:24:14

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

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

来源

2013-10-27 06:25:00 Chitowns24

抓斗属性点击 - 使用上的单击事件处理

回答

相关问题