title: Passing parameters to on click jquery event from dynamic list of anchor tags
body: <p>I'm working on a list of elements in my asp.net mvc project. Each element is part of a <code>ul</code>, and the list elements are generated based on a list in my model.</p>
  
  <p>I'm trying to add a delete button to each of these elements, but I'm struggelig a bit with how to make these elements unique, for jquery to pass the correct parameters to my action later on. </p>
  
  <p>Each element has its own guid, but I can't figure out how to pass these along to the <code>.on('click')</code> jquery handler.
  Here's the relevant part of my razor view:</p>
  
  <pre><code>&lt;ul class="panel-tasks ui-sortable"&gt;
      @foreach (RunModel run in Model.PlannedRuns)
      {
          &lt;li&gt;
              &lt;label&gt;
                  &lt;i class="fa fa-edit"&gt;&lt;/i&gt;
                  &lt;!--&lt;i class="fa fa-ellipsis-v icon-dragtask"&gt;&lt;/i&gt;--&gt;
                  &lt;a href="@Url.Action("RunDetails", "Planning", new { runId = run.Id })"&gt;&lt;span class="task-description"&gt;@run.Name&lt;/span&gt;&lt;/a&gt;
                  &lt;span class="sl-task-details"&gt;@run.RunTask&lt;/span&gt;
                  &lt;span class="sl-task-unit"&gt;@run.ConveyanceId&lt;/span&gt;
                  &lt;span class="sl-task-location"&gt;@run.Operation.WellContract.Location, @run.Operation.WellContract.Name&lt;/span&gt;
              &lt;/label&gt;
              &lt;div class="options"&gt;
                  &lt;a href="#" id="del" &gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here's my javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#del").on("click", function (runId) {
              $.ajax({
                  url: "@Url.Action("DeleteRun", "Planning")",
                  type: "GET",
              dataType: "json",
              data: { runId: runId },
              error: function (msg) {
                  // Error handling
              },
              success: function (msg) {
                  // Success handling
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I do realize I could add <code>onClick</code> to the anchor tag passing along the id as a parameter there, but I was hoping using jquery would do the trick, like mentioned above. Also, is there a recommended approach for doing tasks like this when several html elements use the same method?</p>