jQuery设置值属性时的奇怪行为

Question

I am a little baffled by this issue I encountered.

I have an <input type="text" /> element in a template that I am cloning when creating object items.

function buildSectionTest(item) {
if (item == null)
    return;
var sectionItem = $('.templates-mc .templates-mc-section-item').clone();

$('.mc-label', sectionItem).text(item.TestDescription);
$('.mc-input', sectionItem).attr({ 'testid': item.ID, 'syntax': item.TestSyntax, 'value': item.Value });
//$('.mc-input', sectionItem).val("TEST");
//alert($('.mc-input').attr('value');
//alert($('.mc-input').val());

return sectionItem.html(); 
}

However, the value property is not being set. Looking at the rendered html reveals:

<input class="mc-input rounded-corners" type="text" testid="6446" syntax="[input]">

I have tried a few things (commented out in the above code) but all return empty string, or no value.

Initially I thought that I may be clearing all input fields (for what ever strange reason), but this is not the case.

my item.Value is not null or undefined.

Has anybody else encountered this issue?

Appreciate all input!

Answer 1

don't use .attr() to set the value use .val()

$('.mc-input', sectionItem).attr({ 'testid': item.ID, 'syntax': item.TestSyntax}).val(item.Value);

Ex:

function buildSectionTest(item) {
    if (item == null)
        return;

    var sectionItem = $('.templates-mc .templates-mc-section-item').clone();

    $('.mc-label', sectionItem).text(item.TestDescription);
    $('.mc-input', sectionItem).attr({ 'testid': item.ID, 'syntax': item.TestSyntax}).val(item.Value);
    //$('.mc-input', sectionItem).val("TEST");
    //alert($('.mc-input').attr('value');
    //alert($('.mc-input').val());

    return sectionItem; //do not return the html
}

Answer 2

尝试这个：

$('.mc-input', sectionItem).attr({ 'testid': item.ID, 'syntax': item.TestSyntax, this.val(item.Value) });