title: Calling Javascript functions from href defined in Razor file
body: <p>So I have this function <code>cart.remove(itemid)</code>, that removes an item from the shopping cart using an ajax call. The <code>cart</code> object is defined in its own javascript file and its functions are accessible and the <code>remove()</code> function works properly to remove items as intended. Upon clicking the link below, an alert pops up, confirming if you really want to remove the item. If yes, it removes the item from the shopping cart.</p>
  
  <pre><code>@if (Model.Count &gt; 0)
  {
      foreach (var item in Model.Items)
      {
          &lt;div&gt;&lt;a title="Remove item from cart" href="javascript:cart.remove(@(item.ItemID));"&gt;Remove Item&lt;/a&gt;&lt;/div&gt;
      }
  
  }
  </code></pre>
  
  <p>Now, due to complexity of the different types of items in the shopping cart, for a more user friendly UI, I need the confirm-remove-item alert text to be different, depending on the item that is clicked. I have a function defined in the model, <code>GetRemoveItemAlertText(int itemid)</code> that returns the appropriate text. I wrap that text in a json object so that the text isn't visible as one of the <code>remove()</code> function's parameters, when someone hovers over the link, in the browser statusbar.</p>
  
  <p>The javascript <code>remove()</code> function has been redefined to <code>remove(itemid, alerttext)</code> to display the custom remove text, instead of the same text every time. No other changes to that function; it still displays an alert and removes the item if the user clicks yes to the confirmation. Here is my attempt at removing the item with the custom alert text:</p>
  
  <pre><code>@if (Model.Count &gt; 0)
  {
      foreach (var item in Model.Items)
      {
          var alert = Model.GetRemoveItemAlertText(item.ItemID);
          &lt;script type="text/javascript"&gt;
              function removeItem_@(item.ItemID)() {
                  var bodytext = "@UriEscapeDataString(alertText)";
                  var alerttext = {
                      bodytext: bodytext
                  };
              cart.remove(@(item.ItemID), alerttext);
              }
          &lt;/script&gt;
          &lt;div&gt;&lt;a title="Remove item from cart" href="javascript:cart.removeItem_@(item.ItemID)();"&gt;Remove Item&lt;/a&gt;&lt;/div&gt;
      }
  
  }
  </code></pre>
  
  <p>Since the javascript function is defined inside a loop, the name needs to be different each time, hence the itemid in the function name. It should grab the custom remove-item text and then call <code>cart.remove()</code>, just like it was previously being done inside the href definition. <strong>The problem is that this function <code>removeItem_@(item.ItemId)()</code> is not being called.</strong> Even if I just put an <code>alert()</code> or <code>console.log()</code> inside the function, the code never fires. Is there anyway to accomplish this? I've also tried calling that function by using a click listener bound to a class that is on a <code>&lt;span&gt;' or</code>`. Any suggestions? I can clearly see, by viewing the page source, that each of the cart's current items have their own remove-item function defined, but for some reason, the code isn't reachable.</p>