替换元素并单击返回旧元素

Question

I have following function:

datum.on('change', function(){
    var url = '<?php echo base_url()  ?>admin/admin_tvprogram .tvprogram > *';
    tvprogram.empty().load(url, {'datum':$(this).val()}, function(){
        var izmeni = $(this).find('a');
        izmeni.on('click', function(){
            var sat = $(this).parent().find('.sat'),
            sat_vrednost = sat.text(),
            naziv = $(this).parent().find('.naziv'),
            naziv_vrednost = naziv.text(),
            vrati = $(this).parent().append('<span class=vrati>Vrati</span>');

            var novi_sat = sat.replaceWith('<input type=text name=sat value=' + sat_vrednost + ' >' ),
            novi_naziv = naziv.replaceWith('<input type=text name=naziv value=' + naziv_vrednost + ' >' );

        });
    });
});

Everything is working fine, but I need one more functionality. When a user click on vrati (new appended span element), elements sat and naziv need to return to original form. How can I do this?

When load function is activated I get following HTML:

<ul>
    <li>
    <span class="sat">18:00</span>
    <span class="naziv">Opravka Traktora</span>
    <a data-id="2">Izmeni</a>
  </li>
</ul>

After izmeni is clicked I get following HTML:

<ul>
<li>
<input type="text" value="18:00" name="sat">
<input type="text" traktora="" value="Opravka" name="naziv">
<a data-id="2">Izmeni</a>
<span class="vrati">Vrati</span></li>
</ul>

Answer 1

You are saving the values of the elements right when the user clicks.

Probably need to save the values before doing the load and then the same code in the on-click will restore them.

Answer 2

Populate your list input tables from variables that you define, and then apply the j query .text action to your sat and naziv giving them the parameter of that variable again when vrati is clicked

//the function textvalueToggle gets called on document load assigning the values to sat and naziv. Then a click listener is attached to vrati to call that same function reassigning the values

    $(document).ready(function() {
           textvalueToggle();
           $('#vrati').click(textvalueToggle);
    });

    function textvalueToggle() {
       $('#sat').text('18:00');
       $('#naziv').text('Opravka Traktora');
   }