Изменение текста внутри диапазона после щелчка (JQuery)

Question

У меня есть кнопка внутри диапазона

<span class="act-button"><input type="button" value="Deactivate" onclick="deactivateTemplate(' + options.rowId + ')"></span> 

и мне нужно изменить текст внутри span.act-button после onclick,
Я пытался использовать этот код

function deactivateTemplate(id) { 
     $.post('@Url.Action("DeactivateFormTemplate")', { id: id }) 
     .done(function (result) { 
      showMessage(result.Message); 
      $('span.act-button').empty().html('<input type="button" value="Activate" onclick="activateTemplate(' + options.rowId + ')">'); 
     }); 

но после щелчка моя кнопка просто исчезает, и я не получаю новую кнопку внутри span.act-button.
Что случилось с моим кодом?

Answer 1

1. Не нужно воссоздавать вашу кнопку. Просто измените его значение

   function deactivateTemplate(id) { 
        $.post('@Url.Action("DeactivateFormTemplate")', { id: id }) 
        .done(function (result) { 
         showMessage(result.Message); 
         $('span.act-button>input').val('Activate'); 
        }); 
   } 
   

2. методы манипуляции DOM в JQuery являются асинхронными: они не завершаются немедленно. Поэтому возможно, что empty() завершит выполнение после html(). Старайтесь не использовать оба вида.