A mudança do jQuery .val não altera o valor de entrada

Eu tenho uma entrada HTML com um link no valor.

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

Estou usando o jQuery para alterar o valor de um determinado evento.

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

O código acima altera o valor da caixa de texto, mas não altera o valor no código (value = 'http://www.link.com' permanece inalterado). Eu preciso que o valor = '' mude também.

Use em seu attrlugar.
$('#link').attr('value', 'new value');

demo

Alterar a propriedade value não altera o defaultValue. No código (recuperado com .html()ou innerHTML), o atributo de valor conterá a propriedade defaultValue, não a de valor.

para expandir um pouco a resposta de Ricardo: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

sobre val ()

Definir valores usando este método (ou usando a propriedade de valor nativo) não causa o despacho do evento de mudança. Por esse motivo, os tratadores de evento relevantes não serão executados. Se você quiser executá-los, deve chamar .trigger ("alterar") após definir o valor.

Este é apenas um cenário possível que aconteceu comigo. Bem, se isso ajuda alguém, ótimo: eu escrevi um aplicativo complicado que em algum lugar ao longo do código usei uma função para limpar todos os valores das caixas de texto antes de mostrá-los. Algum tempo depois, tentei definir um valor de caixa de texto usando jquery val ('valor'), mas não percebi que logo depois invoquei o método ClearAllInputs ... então, isso também pode acontecer.

Meu problema semelhante foi causado por ter caracteres especiais (por exemplo, pontos) no seletor.

A solução foi escapar dos caracteres especiais:

$("#dots\\.er\\.bad").val("mmmk");

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>

Para mim, o problema era que alterar o valor deste campo não funcionou:

$('#cardNumber').val(maskNumber);

Nenhuma das soluções acima funcionou para mim, então investiguei mais e descobri:

De acordo com a Especificação de Evento DOM Nível 2: O evento de mudança ocorre quando um controle perde o foco de entrada e seu valor foi modificado desde que ganhou o foco. Isso significa que o evento de mudança é projetado para disparar na mudança pela interação do usuário. As alterações programáticas não fazem com que este evento seja disparado.

A solução foi adicionar a função de gatilho e fazer com que ela acione o evento de mudança como este:

$('#cardNumber').val(maskNumber).trigger('change');

Verifique novamente se há mais de um elemento com id não exclusivo! Essa era a minha situação com loop foreach e duplicação dos meus ids.