Question

I’m having a problem with accessing my buttons separately using jquery.
Suppose I have the following code:

<button id="ButtonOne">Button One</button>
<button id="ButtonTwo">Button Two</button>
<br />
<button id="ButtonThree">Button Three</button>

This is rendered in a partial view that gets posted up to four times in the same main view and grouped based on

@Model.Group.ToString()

What I want to do is be able to use jQuery to use one of my buttons for an event, but everything I’ve tried so far either doesn’t work or activates all the buttons with the same name. I’ve been trying to figure out how to identify each button individually based on which group it is in. The code below is the code that fires off every button on the page instead of just the one I want.

<script type="text/javascript">
    $(document).ready(function () {
        $('#ButtonOne').click(function () {
            alert('Button One was clicked.');
        });
    });

</script>

Obviously this is because they all have the same name, but is there any way that I can do something similar to this:

<button id="ButtonOne" + @Model.Group.ToString()>ButtonOne</button>

Answer 1

Ids should be unique within a document, so your duplicate Ids will be what’s causing your problem. Could you do something like this –

<button id="ButtonOne@(Model.Group.ToString())">ButtonOne</button>