Question

I’m having some trouble figuring this out. I want to make it so I can place a button in a number of different DIVs but have all the info for the button be the same (class, type, value, etc), this is because its an edit button for the DIV so its just something that is automatically included with any new DIV that is created and my server-side app will generate these buttons automatically. So the issue is how to get the ID of the parent DIV, and I am having some trouble with this as it seems to always default to DIV upd1 even when I click the button contained within upd2, I’ve been searching on this but everything I have found so far hasn’t led me out of this issue.

<div id="upd1">
    <input id= "button" class="button" type="submit" value="Click to edit this Panel" /> 
</div>

<div id="upd2">
    <input id= "button"  class="button" type="submit" value="Click to edit this Panel" /> 
</div>

then I have:

$("#button").click(function() {
    dividediting = $("#button").closest("div[id^='upd']").attr("id");
    alert(dividediting);
}); 

Answer 1

Try this:

$(".button").click(function() { 
   var dividediting = $(this).parent().attr('id');
   alert(dividediting); 
});  

You cannot have two items with the same id – you have to be using a class not the same id on each button.