Create a Jquery Widget for an ASP.NET Texbox
<p>I'm trying to create a JQuery Widget that will be used on an ASP.NET Texbox to add extra html to the rendered input.</p>

<p>If I have:</p>

<pre><code>&lt;asp:TextBox ID="TestUpdate" ClientIDMode="Static" runat="server"&gt;&lt;/asp:TextBox&gt;
</code></pre>

<p>and in a script block at the top of the page:</p>

<pre><code>$(function () {
    $('#TestUpdate').Update(1234);
});
</code></pre>

<p>I'd like this to generate something like:</p>

<pre><code>&lt;input id="TestUpdate" name="ctl00$Main$Items$TestUpdate" type="text"&gt;&lt;a href="controller/action?id=1234"&gt;Update&lt;/a&gt;
</code></pre>

<p>Inside the widget I'll make an Ajax call but I got that covered pretty much.</p>

<p>Here's what I have so far:</p>

<pre><code>(function ($) {
  $.fn.Update = function (prodID) 
  {             
        var id = this.attr('id');

        var newLink = $('&lt;a href="/Products/Test?prodID=' + prodID + '"&gt;Update&lt;/a&gt;'); 

        newLink.on('click', function () {
            alert('TextBox ' + id + ' for ProdID ' + prodID); //replace with Ajax
            return false; 
        }); 

   return this.append(newLink);

  };

})(jQuery);  
</code></pre>

<p>Currently I get this rendered:</p>

<pre><code>&lt;input name="ctl00$Main$TradingItems$TestUpdate" id="TestUpdate" type="text"&gt;&lt;a href="/Products/Test?prodID=1234"&gt;Update&lt;/a&gt;&lt;/input&gt;
</code></pre>
