JQuery html () call does not return value after force attr update

Question

Perhaps I don’t understand something basic here, but the html () call does not return an element with all the attributes filled, even after an explicit call to set the attribute.

For example, I have a text box:

<input type="text" id="foo" value="" />

When the user fills in the value in this field, the function is called (onBlur text field input).

$('#foo').blur(function(event) { updateFoo(this); });

The following code exists in this function:

function updateFoo(input) {
  // force DOM update??
  $('#'+input.id).attr('value', input.value);

  // successfully displays value user entered
  alert($('#'+input.id).attr('value')); 

  // displays input element, with value not filled in,
  // like: 'input type="text" id="foo" value="" />'
  alert($('#'+input.id).parent().html()); 

  ...
}

Should the html () call return an element with a value attribute set?

I am using Firefox 3.6.13 on Max OSX.

I saw this forum: http://forums.asp.net/t/1578929.aspx which I based on some of my assumptions ...

Thanks Galen

Answer 1

, :

jQuery html() Firefox ( .innerHTML) DOM

, . firefox...

:

$('#'+input.id).attr('value', input.value);

:

input.setAttribute('value', input.value); // force DOM update

.

Answer 2

, , value . , , DOM.

attr - , newattr, :

http://jsfiddle.net/m9vWT/

, value...