Question

<div rownumber="0" messageid="29" style="margin:1px 1px 1px 1px; border:1px solid black">
    <input type="button" value="Vote" id="vote">
    <input type="button" value="Flag" id="flag">
</div>

这些<div>元素会动态添加到我的页面中。如何将Jquery click事件绑定到每个投票并标记buttons，并从rownumber messageId <div>获取button或{{1}}值1}}在。

谢谢！

Answer 1

首先，如果您要使用多个按钮，请不要将id用于这些按钮。 HTML ID意味着您可以通过该名称唯一标识元素，如果有两个或更多，则不能。而是制作vote和flag类。

接下来，执行此操作：

$('.vote').live('click', function() {
    var parent = $(this).parent();
    vote(parent.attr('rownumber'), parent.attr('messageid'));
});

我假设您有一个名为vote的JavaScript函数。重要的是传递给它的内容：它将获取已被单击的元素的父元素，然后获取其rownumber属性。使用live将确保您在调用之后创建的任何元素也将绑定事件。

顺便说一句，您应该使用data-row-number和data-message-id或类似的属性。 HTML建议不要随意编写自己的属性：如果用data-作为前缀，则保证不会与任何内容发生冲突。然后，您可以使用上面的attr或jQuery的data函数来检索信息。

Answer 2

jQuery('input[type=button]').click(function (event){
    var theDiv = jQuery(this).parent();
    var theMessageId = theDiv.attr('messageid');
});

Answer 3

$('input[type=button]').click(function() {
      var row = $(this).parent('div').attr('rownumber'),
      messageid = $(this).parent('div').attr('messageid');
      alert(row);
      alert(messageid);
});

这应该可以解决问题

查看示例

http://jsfiddle.net/b5bq8/

如果我也在创建“div”的同时添加它，如果在创建它们之前添加它们，则可能存在它们没有任何影响的风险。

Answer 4

正确的问题，错误的假设：这实际上并不需要jQuery，因为如果做得对，所有信息都已经可用。

如果div是动态生成的，那么给这些div他们自己的id - 也可以给他们一个真实的id id=voteflagdiv<somenumber>，并给按钮一个onclick事件处理程序，onclick="handleVote('voteflagdiv<somenumber>')" - 因为你生成动态div你可以确保div的“id”也是按钮的onclick处理中使用的那个。然后在你的javascript中你有一个函数la：

handleVote(divid) {
  var div = $('#'+id)[0]; // we can also use document.getElementById(divid)
  if(div.rownumber && div.messageid) {
    var rownumber = div.rownumber;
    var messageid = div.messageid;
    // we have the values we want, do something with them now
  }
}

但是，请注意“rownumber”和“messageid”不是合法的html属性。如果你想使用你自己的自定义属性，在传递HTML验证时，你必须在它们前面添加“data-”前缀，并以这种方式查找它们。

从父div获取Id值

4 个答案: