jQuery .val（'xxx'）不是设置值，但是.attr（'value'，'xxx'）是吗？

Question

我有一个用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');
....

注册弹出窗口：

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);
}

Answer 1

不知道您的实际问题是什么，对我来说问题不是很明显，但是attr和val之间是有区别的。 attr方法设置/更改源中输入/元素的attribute ，而您可能会使用浏览器的检查工具看到它，另一方面， val方法设置/更新了内存中的渲染属性，但不起作用浏览器源代码中的原始source/HTML 。 例如，如果您这样做

HTML：

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

JS：

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

并检查源代码，然后您将看到有两个input元素，并且都具有value属性Hello! 但在屏幕上都有world! 。 检查这个详细的答案 。