title: Using JQuery to bind to click events in MVC
body: <p>I am attempting to expand on the examples from <a href="http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx" rel="nofollow">MattHidinger.com</a> to add pop up dialogs to an MVC site.</p>
  
  <p>Using the code from his site...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $.ajaxSetup({ cache: false });
  
  $(document).ready(function () {
      $(".openDialog").live("click", function (e) {
          e.preventDefault();
  
          $("&lt;div&gt;&lt;/div&gt;")
              .addClass("dialog")
              .attr("id", $(this).attr("data-dialog-id"))
              .appendTo("body")
              .dialog({
                  title: $(this).attr("data-dialog-title"),
                  close: function () { $(this).remove() },
                  modal: true,
                  width: 700,
                  height: 350
              })
                  .load(this.href);
          });
  
          $(".close").live("click", function (e) {
              e.preventDefault();
              $(this).closest(".dialog").dialog("close");
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and an Html.ActionLink</p>
  
  <pre><code>@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
  , new { id = item.HighlightReportID }
  , new { @class = "openDialog", data_dialog_id = "dialog", data_dialog_title =
   string.Format("Delete {0}", item.DisplayIdentifier) })
  </code></pre>
  
  <p>I can render an anchor tag that, when clicked, opens a UI Dialog.</p>
  
  <pre><code>&lt;a class="openDialog" data-dialog-id="dialog" data-dialog-title="Delete report for Nov 12" href="/CostModel/Delete/162"&gt;Delete via actionlink&lt;/a&gt;
  </code></pre>
  
  <p>But!</p>
  
  <p>If I add an anchor tag manually to the page using the same identifying structures, it fails.</p>
  
  <pre><code>&lt;a class="openDialog" data_dialog_id="dialog" data_dialog_title="Delete report for Nov 12" href="/CostModel/Delete/162"&gt;Delete via manual anchor tag&lt;/a&gt;
  </code></pre>
  
  <p>Is there a reason why MVC generated Anchor tags would work, versus manually created tags.</p>
  
  <p><strong>Caveat</strong>.  Obviously I would not be manually adding tags to a page in MVC.  I started by trying to use an ImageLink helper that generates an image inside the anchor tag and it failed too, so going back to first principals I tried the manual approach and was very confused when it failed!</p>
  
  <h2>Edit 1</h2>
  
  <p>Here is the code from the page, note I have tried setting the data_dialog_id to be the same and different, adding both at the same time and individually, it makes no difference, only the ActionLink will be picked up by the JQuery.</p>
  
  <pre><code>@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
                      , new { id = item.HighlightReportID }
                      , new { @class = "openDialog", data_dialog_id = "dialog1", data_dialog_title = string.Format("Delete {0}", item.DisplayIdentifier) })
  &lt;a class="openDialog"
                  data_dialog_id="dialog2"
                  data_dialog_title="@string.Format("Delete {0}", item.DisplayIdentifier)"
                  href="/CostModel/Delete/@item.HighlightReportID"&gt;Delete via manual anchor tag&lt;/a&gt;
  </code></pre>
  
  <p>and these are the two tags as rendered</p>
  
  <pre><code>&lt;a class="openDialog" data-dialog-id="dialog1" data-dialog-title="Delete report for Dec 12" href="/CostModel/Delete/212"&gt;Delete via actionlink&lt;/a&gt;
  &lt;a class="openDialog" data_dialog_id="dialog2" data_dialog_title="Delete report for Dec 12" href="/CostModel/Delete/212"&gt;Delete via manual anchor tag&lt;/a&gt;
  </code></pre>
  
  <p>As far as my eyes can see they are identical, and yet only the first one (dialog1) will be picked up by the jquery.</p>