在引导模式中使用 jquery 更改表单输入字段值

Question

我在引导模式中有一个表单。我希望输入字段显示用户第一次填写表单时输入的过去值，这些值是我从 cloudant 数据库中检索的。我希望这些输入字段是可编辑的，以便用户可以重新提交表单并进行任何更改。但是，当我尝试在输入字段中显示过去的信息时，我陷入了困境。我找不到输入字段的这些值没有被更改的任何原因。

将我的按钮添加到我的 boostrap 列表组的 javascript：

var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
    {

        var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
        $('#iot-list').append(button);
    }
};

我的按钮将放置在我的列表组中的 html：

<div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
                <button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
                <p class="fancy-font dash-item-title">Your IoTs</p>
                <button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
                <div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>

            </div>...

点击按钮时弹出的模态：

<div class="modal fade" id="quick-view-iot-modal">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="quick-view-iot-h4"></h4>
  </div>
  <div class="modal-body">
        <form id="edit-iot-form" method="post">
        IoT Name: <br>
        <input type="text" name="iot-name" class="iot-value" required><br>
        Organization ID: <br>
        <input type="text" name="org-id" class="iot-value" readonly required><br>
        Authentication Method: <br>
        <input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
        API Key: <br>
        <input type="text" name="api-key" class="iot-value" readonly required><br>
        Authentication Token: <br>
        <input type="text" name="auth-token" class="iot-value" readonly required><br>
        </form>
        <button name="more" type="button" class="fancy-font page-button">More</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

将内容添加到模态的 JavaScript。它位于文档准备好时调用的 main 方法中：

 $('.iot').click(
    function()
    {
        var iotName = event.target.name;
        getIots(loadIotQuickView, iotName);
        $('h4#quick-view-iot-h4.modal-title').text(event.target.name);


    });

getIots() 函数：（它包含参数variable=null，因为我还在代码的另一部分未使用varaible参数的地方使用了它。此方法将ajax post发送到servlet，然后servlet以iot对象数组进行响应）

var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
     {
        iotsJSON = response;

        callback(response, variable);
     });

loadIotQuickView() 函数：（我认为这是我遇到问题的地方）

var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;

for(var iot in iotsJSON)
{
    if(iotsJSON[iot].appID = iotName)
        currentIoT = iotsJSON[iot];

}
if(currentIoT == null)
    return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);


};

我已经尝试了许多 jquery 选择器，但表单中的输入字段值都不会改变。我已经单步执行了代码，所有变量都有正确的值，只是最后一行没有按照我想要的方式执行。我不确定我的 jquery 选择器是否有问题或者是否有其他问题。提前致谢！

更新：我尝试过以下选择器：

$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]') 

我还尝试将“edit-iot-name”的 id 添加到我的输入字段中：

$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')

但这些都不起作用，这让我相信这一定不是我的选择器的问题。

更新：

我还尝试.val(currentIoT.appID)与所有以前的选择器一起使用。还是行不通。

Answer 1

我不知道为什么，但将我的表单所在的模态 id 添加#quick-view-iot-modal到我的选择器中是有效的。但是由于某种原因，它仅在我使用时有效.val()，而在我使用时无效.attr()。所以最终的结果是：

$('#quick-view-iot-modal #edit-iot-name').val(currentIoT.appID);

我不知道为什么需要添加模态的 id，也不知道为什么它不能像这样工作：

$('#quick-view-iot-modal #edit-iot-name').attr("value",currentIoT.appID);

但它有效！如果有人知道为什么它只适用于此组合，请告诉我！