Get Id value from parent div

<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" valu开发者_开发百科e="Flag" id="flag">
</div>

These <div> elements are added dynamically to my page. How do I bind a Jquery click event to each of these vote and flag buttons and get the rownumber or messageId value from whatever parent <div> the button is in.

Thanks!

First of all, don't use id for those buttons if you're going to have more than one. An HTML ID means that you can uniquely identify the element by that name, which you can't if there's two or more. Instead, make vote and flag classes.

Next, do this:

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

I'm assuming you have a JavaScript function called vote. The important thing is what's passed to it: that will get the parent of the element that has been clicked on and then get its rownumber attribute. Using live will ensure that any elements you create after you call it will also have the event bound to it.

As an aside, you should probably use data-row-number and data-message-id or something similar for the attributes. HTML doesn't recommend making up your own attributes randomly: if you prefix them with data-, they're guaranteed not to clash with anything. You can then retrieve the information using either attr as above or jQuery's data function.

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

Right question, wrong supposition: this doesn't actually require jQuery, because all the information is already available if done right.

If the divs are generated dynamically, then give these divs their own id - can also give them a real id, id=voteflagdiv<somenumber>, and give the button an onclick event handler, onclick="handleVote('voteflagdiv<somenumber>')" - because you generate the divs dynamically you can make sure that the div's "id" is the one that's also used in the button's onclick handling. Then in your javascript you have a function a 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
  }
}

However, be aware that "rownumber" and "messageid" are not legal html attributes. If you want to use your own custom attributes, while passing HTML validation, you'll have to prefix "data-" to them, and look them up that way, too.

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

this should do the trick

check out the example

http://jsfiddle.net/b5bq8/

if i would also add this at the same time the "div's" are created, if they are added before they are created you may run the risk of them not having any affect.