jquery第一个文本字段值不正确

Question

我有一个弹出窗口。它有三个文本输入字段。所有这些都有一些通过另一种形式设置的值。当我专注于它们时，第二个和第三个字段具有正确的值。

关注第一个字段时，我没有按预期获得内容。我使用了jquery的html（）函数来显示这些文本输入字段中的内容。

屏幕截图位于：

我准备好的功能片段在这里：

$(document).ready(function(){ 
  $( "body" ).delegate( ".editDiv", "click", function() {
     changed_id = this.id
     var copyData = $("#" + changed_id).html();
     var changed_class = "edit";
     var new_input = "<input id=" + changed_id + " " + "class=" + changed_class + ">";
     var editableText = $(new_input);
     editableText.val(copyData);
     $(this).replaceWith(editableText);
     editableText.focus(function() { $(this).select(); });
 });

相同的代码返回第2和第3个字段的正确值。但第一场并非如此。可能的原因是什么？

修改 弹出窗口的HTML代码是：

<div id="dialog-form" title="Add advance">
<h4> 
  <b>
    {{ full_name }}
  </b> 
  <span> 
    <small>
      {{ month_name }} {{ year }}
    </small> 
  </span> 
</h4>

<table id="special" class="table" style="width: 70%; margin: auto;"> 
  <tbody> 
    {% for a in old_advances %}
      <tr> 
        <td class="text-right popup">
          <span style="float:left;"> {{ a.advance_date }} </span>
          <div class="editDiv" id="{{a.id}}">{{ a.advance_amount|floatformat:2 }} 
        </td> 
      </tr>
    {% empty %}
      <p> No advance given this month.</p>
    {% endfor %}
  </tbody>
</table>
</div>    
</div>

Answer 1

您应该使用val获取输入值（文本框，复选框等）。

var copyData = $.trim($("#" + changed_id).val());

获取select下拉列表的值：

var copyData = $.trim($("#" + changed_id +" option:selected").val());

或

如果您想获取内部文本（div，span等），请使用text：

var copyData = $.trim($("#" + changed_id).text());

您可能还希望trim删除字符串开头和结尾的多余空格。