jQuery .val('xxx')没有设置值,但.attr('value','xxx')是?

时间:2013-09-30 23:21:49

标签: javascript jquery twitter-bootstrap

我有一个用javascript填充的表,通过ajax获取数据。我有一个<tr>模板,我克隆并将值设置为通过ajax请求检索的数据。我正在使用Twitter bootstrap的popovers,以便用户可以单击一个单元格,弹出带有输入/选择等的弹出窗口,提示用户更改单元格值。当我设置这些输入的值时会发生此问题。当我构建每一行时,我使用.val('xxx')在弹出模板中设置输入的值,但是当我记录它/单击单元格并查看弹出窗口时,没有任何更改;相反,如果我用.attr('value', 'xxx')设置它,它就可以了。为什么.val('xxx')不起作用?

这就是肉的样子......

行模板:

    ....
    <td>
        <div class="last-name popover-toggle">
            <span class="vlabel">----</span>

            <div class="popout">
                <input type="text" name="last_name" value=""/>
                <div class="popout-button-container">
                    <button type="button" class="btn btn-primary btn-small cancel-field">Cancel</button>
                    <button data-url="{{ url('edit_lead.json') }}" type="button" class="btn btn-primary btn-small save-field">Save</button>
                </div>
            </div>
        </div>
    </td>
    ....

设置输入值:

...
if (data['last_name']) {
    $nRow.find('.last-name input[name=last_name]').val(data['last_name']);//.attr('value', data['last_name']);
    $nRow.find('.last-name .vlabel').text(data['last_name']);
}
registerPopover($nRow.find('.last-name'), 'Last Name');
....

注册popover:

function registerPopover(el, title) {
    var options = {
        animation: false,
        content: el.find('.popout').html(),
        html: true,
        trigger: 'manual'
    };
    if (typeof(title) != 'undefined') {
        options['title'] = title;
    }
    el.popover(options);
}

1 个答案:

答案 0 :(得分:1)

不确定您的实际问题是什么,问题对我来说不是很明显,但attrval之间存在差异。 attr方法设置/更改源中输入/元素的attribute,您可以使用浏览器的检查工具查看它,另一方面,val方法设置/更新渲染属性在内存中但不会影响浏览器源代码中的原始source/HTML。例如,如果你做这样的事情

<强> HTML:

<input type = "text" name="txt" id = "txt" value = "Hello!" />

<强> JS:

$('#txt').val('World!').clone().insertAfter($('#txt'));

然后检查源代码,然后您会看到有两个input元素且两者都具有值属性Hello!,但在屏幕上都有world!Check this detailed answer