Question

I have replaced chosen replaced and inserted dom elements this way:

$(".editLink").click(function () {
    var $temp = $(".editLink").parent().prev().find("label").html();

    var $tempBox = $(".editLink").parent().prev().find("label").replaceWith("<input type='text' name='dataUpdate'/>");

    $tempBox.insertAfter("<input type='submit' value='Update'/>");
});

However, changes flicker,..and dont persist. They only persist for one second..(I guess only for the time of the event. How can I make them persist forever ?

UPDATE:

<table width="400px">
<form action="/Admin/Update?Length=4" method="post">
<tr>
    <td>
        <label for="fadsf">
            fadsf</label>
    </td>
    <td>
        <a class="editLink" href="/Admin/MenuManagement?Length=5">Edit</a>
    </td>
    <td>
        <a class="deleteLink" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#1"
            href="/Admin/Delete?deleteID=1&amp;unDelete=1" id="1" title="0">Delete</a>
    </td>
</tr>
</form>

Answer 1

I’ll guess you suggest they only persist for the time of the event because you are binding to an <a> tag which causes the page to reload or navigate somewhere else. You need to prevent that default behavior like so:

$(".editLink").click(function (e) {
   ... other code

   $(e).preventDefault();

   ... other code
});

And the documentation – https://developer.mozilla.org/en/DOM/event.preventDefault

UPDATE – Based on the HTML you have now provided

Your HTML does not look valid. You cannot nest a form tag in between a table tag and a tr tag and expect it to work. First off, move the form tag outside of the table. Secondly, close the table with a matching </table> tag. Maybe that will help.

Hope this helps!