Question

I have an entity with the following attributes

 public class DimensionElement
{
    public string Element { get; set; }
    public string Term { get; set; }
}

I then created a editor template for use in a partial view. The following is the editor templates.

DimensionElement.ascx

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Navigate.Domain.Entities.DimensionRepresentationEntities.DimensionElement>" %>

<input type="button" id="<%:Model.Term%>" value="<%:Model.Element%>" class="dimensionElement" style="width: 100px"/>

Here is another template to deal with an IEnumerable of dimensionElement:

DimensionElements.ascx

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Navigate.Domain.Entities.DimensionRepresentationEntities.DimensionDescriptions>" %>
<table>
<tr>
<% var counter = 0; %>
<% foreach (var dimElement in Model.DimensionElements)
   { %>
   <td>
      <%:Html.EditorFor(m => dimElement)%>
   </td>

   <% counter++;
      if (counter == 5)
      {%>
        </tr><tr> 
      <%
          counter = 0;
      }
   } %>
</tr>
</table>

And now a snippet from my partial view:

 <%:Html.EditorFor(x => Model.DimensionElements)%>

<script type="text/javascript">
      $(document).ready(function () {  
        $('.dimensionElement').click(function () {

            alert(this.val() + " clicked");

        });
    });

</script>

My question is I am wondering why I can not get the click function to fire. I look at the source and the class is attached to each of my buttons.

Answer 1

Try this:

alert($(this).val() + " clicked");