title: MVC 3 Razor Dynamically added Ajax.Action Link Only works first time in IE8
body: <p>I am very new to web development (about a month) and i have run into something strange.</p>
  
  <p>I am using VS2010, MVC 3 Razor to create a simple app. </p>
  
  <p>I have two tables holding the same type of information. As in both table A and Table B hold users. the Difference being, Table A has users who are in the "Role", and table B holds the users who are not in the "Role".</p>
  
  <p>Both tables have two columns, One with the user name, the other holds a Ajax.ActionLink.</p>
  
  <p>So, to add a user to Table "B", I click the "Ajax.Actionlink" on Table "A". The "add" is save through the MVC action, and i move the Table Row using AjaxOption OnSuccess event. The OnSuccess event basically, moves the Row, and alters the Ajax.ActionLink so the newly added User row's ActionLink will Remove the User.</p>
  
  <p>I hope that's clear.</p>
  
  <p>This all works fine. I can add user "A" to the table "A" and everything works fine. I can remove user "A" from table "A" to table "B" and everything is fine. But I can not re-add User A to table "A". The OnSuccess runs, so the row is move, but the Action event is not called. So if i refresh the screen i can see the move did not actually take place. it is the same if i start with User "B" on table "B". Also, a page refresh (F5) does not fix the links, the remain broken until i close and reopen the page.</p>
  
  <p>Everything looks good in the HTML, it shows in the status bar that when i click the link, the correct href is being called, but fiddler registers no call and the action is not called.</p>
  
  <p>I suspect i have some sort of binding issues, but i am lost here. Everything works fine in Firefox</p>
  
  <p>Please help. Code below, with Comments added. Remember this works to add and remove, remove and add, but re-add and re-remove only calls the function but does not call the Action. So i know the Actions are spelt correctly etc.</p>
  
  <pre><code>//// element is the ID of the element i am Moving
  //// targetElement is the ID of the tbody i am moving the element to
  function move_element(element, targetElement) {
      try 
      {
         //// get the HTM 
         var elementHTML = $("tr[id=" + element + "]").children(".Action").html();
         //// based on the tbody id
         switch (targetElement) 
         {
         case "AssignedToGroup":
              //// Change the target body for next call to this function
              elementHTML = elementHTML.replace("AssignedToGroup", "UnassignedToGroup");
              //// change th action name
              elementHTML = elementHTML.replace("AddGroupRole", "DeleteGroupRole");
              //// change the display label
              elementHTML = elementHTML.replace("Assign", "Remove");
              break;
         case "UnassignedToGroup":
              elementHTML = elementHTML.replace("UnassignedToGroup", "AssignedToGroup");
              elementHTML = elementHTML.replace("DeleteGroupRole", "AddGroupRole");
              elementHTML = elementHTML.replace("Remove", "Assign");
              break;
       }
       //// Create the new Ajax &lt;td&gt; element
        $("tr[id=" + element + "]").children(".Action").replaceWith("&lt;td  class='Action'&gt;" + elementHTML +  "&lt;/td&gt;")
        //// Add the row to the other body
        $("tr[id=" + element + "]").appendTo($("tbody[id=" + targetElement + "]"));
     }
     catch (e) 
     {
       alert(e.Message); ////NO ERROR IS RAISED
     }
  }
  </code></pre>