jQuery 3.3.1 does not update the 'value' attribute when I change the value of an input

You do not have to insert it as attr but as val

$('#link').val('value');

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input type='text' value='http://www.link.com' id='link' />

<input type="button" value="prueba" onclick="alert($('#link').val())"/>

It is because in one case you bring a atributo , which takes the value you have at the beginning, that is, when creating the html, while in the case of using val() you are bringing the propiedad value , which changes if the value of the input is modified. It is implemented from jQuery 1.6.

Both attributes and properties can be modified by jQuery.

You can see more here .

The solution to your problem is very simple, the only thing you have to do is detect when the value of the said input changes using events and then that value assign it to the element you want to modify. Example:

//Detectamos cuando hay cambios.
$('#link').on('change', function(e){
    //Y a la vez en el callback obtemos el valor introducido por el usuario
    //y simplemente al atributo del elemento le asignamos el valor introducido
    $("#link").attr('value', e.target.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='text' value='http://www.link.com' id='link' />

<input type="button" value="prueba" onclick="alert($('#link').attr('value'))"/>

At first, the value attribute of the input is equal to its value, therefore

console.log(jQuery('#link').attr('value'));

It is consistent with the initial value. After changing it, this command continues to report the initial value.

If you do instead:

console.log(document.getElementById('link').value);

You get the new input value.

Why is this happening?

This happens because jQuery does a initial population of the attributes of the html element based on all its properties and attributes strong> indistinctly.

After changing the value, the property value of the item has changed, but the data that jQuery used to populate attr does not change for certain properties , such as value of an input of type text, or status checked of a checkbox because, I repeat, they are properties and not attributes .

It happens that in the latest versions of jQuery (from 1.6 onwards, actually), there is a differentiation between properties and attributes:

console.log(jQuery('#link').attr('value')); // no habrá cambiado
console.log(jQuery('#link').prop('value')); // sí habrá cambiado

Do the test by changing the value of the input in the following snippet and using the buttons that send the attribute value and the property value to the console.

jQuery(document).ready(function() {

  jQuery('#link').on('keypress change', function() {
    jQuery('#prueba_attr').removeAttr('disabled');
    jQuery('#prueba_prop').removeAttr('disabled');
  });

  jQuery('#prueba_attr').on('click', function() {
    console.log("attr('value') sigue siendo ", '"' + $('#link').attr('value') + '"');
    console.log("input value ahora es ", '"' + document.getElementById('link').value + '"');
  });

  jQuery('#prueba_prop').on('click', function() {
    console.log("prop('value') ahora es ", '"' + $('#link').prop('value') + '"');
    console.log("input value ahora es ", '"' + document.getElementById('link').value + '"');
  });
});

#link {
  width: 300px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<input type='text' value='cambia mi valor para habilitar los botones' id='link' />

<input type="button" id="prueba_attr" value="prueba attr" disabled/>
<input type="button" id="prueba_prop" value="prueba prop" disabled/>

Side note : jQuery('#link').val() deletes the value property of an input, not the value attribute. That's why it works for you.

Side note 2 : Use of jQuery('#link').attr(x) changed in jQuery 1.6, but in 1.6.1 they tried to revert it to how it was before . This has been evolving in later versions, but although it works in some cases , it is still recommended to use jQuery('#link').prop(x) when it comes to an input.