Question

我有一段设置数字输入值的javascript。但是，它不会起作用。调用后输入的值字段仍然为空（尽管输出元素的val（）的console.log（）确实显示了正确的值）。我试过设置三个方面的值jQuery的.val（总计），。attr（'value'，total），以及普通的旧.value =，但仍然没有。我甚至用html替换了整个元素，并将值连接到value属性中，它不起作用。

任何想法为什么不采取这个？

这是标记：

<div id="proposal_price_box">
  <div class="proposal_price_header sys_bkgcolor">
    <span class="title"><h3>Price to Appear on Proposal</h3></span>
  </div>
  <div class="inner">
    <span class="label">$</span>
    <input type="number" class="amount-input" id="proposal_price" value=""/>
  </div>
</div>

相关的javascript：

$('#proposal_price').val('1234');

Jsfiddle在下面展示了这个问题。

http://jsfiddle.net/n8z9K/12/

不知何故，如果显示元素的容器，它将设置值。但是一旦它再次隐藏起来，它就会崩溃。

编辑抱歉，我没有在JSfiddle中正确演示此问题。我试图克隆容器的内容并将其放在其他地方。我已经更新了jsfiddle以更好地展示问题。

Answer 1

输入节点的值与其value属性之间存在差异。使用val（）方法分配其值时，您将设置其值，而不是其value属性。当您使用html（）方法时，您将获得包含所有属性（包括value属性）的html，但该属性未通过val（）赋值更改。只有节点的值发生了变化。

Answer 2

你做#proposal_price { display: none; }。如果你是那个元素，它保持相同的ID（实际上是无效的，但现代浏览器可以处理这个）。因此，它仍然是隐藏的，因为display: none;您应该删除克隆的ID，否则也不会显示克隆。

是的，这个jQuery似乎解决了它：

$(document).ready(function() {
    $('#proposal_price').val('123');
    console.log("before clone");
    clone = $('#proposal_container').clone();
    clone.attr("id", "");
    console.log("after clone");
    $('body').append(clone.html());
});

以编程方式设置数字输入值不起作用

2 个答案: