更改动态加载的隐藏表单元素的值答案

【问题标题】：Change the Value of Dynamically Loaded Hidden Form Element更改动态加载的隐藏表单元素的值
【发布时间】：2012-10-09 13:17:26
【问题描述】：

我无法更改通过 ajax 动态加载的隐藏表单元素的值。当用户单击日期时，我希望一些隐藏的输入字段能够自动更新为日、月和年（为简化起见，代码中只显示了日）。

我想主要问题是如何选择通过 ajax 动态加载的元素。

简化代码：

index.php

<a href="#" id="someLink">Click Me</a>

include.js

$(document).ready(function(){
    $('#someLink').click(function(){
        // Create modal dialog dynamically
        var modal = $('<div/>').attr({
            id:'new' + objectName + 'Modal',
            class:'modal hide fade',
            tabindex:'-1',
            role:'dialog',
        });

        // Ajax call to load modal
        $.ajax({
            url: "getModal.php",
        }).done(function ( data ) {
            modal.html(data);
        });

        // show form
        modal.modal('show');    

        return false;
    });

    // bind datepicker from jQuery UI to text input
    $("body").on({
        focus: function(){ 
             $('.datepicker').datepicker({
                onClose: function(dateText, inst) {
                    var inputName = $(this).attr("name"); //returns "startDate"
                    console.log($('#'+inputName+'_day')); // returns "[]"
                    $('#'+inputName+'_day').val(new Date(dateText).getDate());
                  }
            });
        }
    },'.datepicker');
});

getModal.php

echo <?php
echo "<form name='modalForm'>";
echo "<input type='hidden' name='startDate_day' id='startDate_day'>";
echo "<input type='text' class='datepicker' name='startDate' id='startDate'>";
echo "</form>";
echo ?>

【问题讨论】：

inputName 在哪里定义？我在你的代码中只能找到用法，没有定义
据我所知，与您的 ajax 加载无关，这不是重点。您只需像往常一样选择 DOM 元素并更改它。而console.log('#'+inputName+'_day') => [] - 这不可能是真的，[] 可以由 jQuery 包装器返回，而不是通过字符串的 concat
我添加了现在显示 inputName 来自何处的行。
jQuery 不会骗你，你没有 id 等于 startDate_day 的元素
抱歉这个错误，我已经更正了帖子。在我的 webapp 中，确实有一个 id 等于“startDate_day”。

标签： jquery-ui jquery jquery-selectors

【解决方案1】：

DOM 元素的加载方式应该没有问题，如果它存在 - jQuery 会找到它。

你应该通过name选择器选择你的元素

$('input[name="' + inputName + '"_day"]').val(...);

或者给你加载的输入一个id="startDate_day"

【讨论】：

【解决方案2】：

您可以使用 Chrome 控制台或 Firebug 来尝试以下 sn-p。

console.log(inputName);
$('#'+inputName+'_day').val();

必须存在具有该名称的元素，否则 jQuery 将无法返回任何内容。

作为另一种调试技术，您可以尝试在页面视图源中搜索“表单”一词，以查看是否已加载所需的表单。

【讨论】：

据我了解，表单显示正确，并且有一个日期选择器，其回调实际上不起作用

【解决方案3】：

我能够找到问题的原因，希望对其他人有所帮助。

我使用 Grails/Rails，它会自动在 ID 中添加一个句点字符，但我忽略了这一点。我随后尝试使用 jQuery 调用名称中带有句点的元素，但该元素不起作用（因为句点是为类名保留的）。

我确实创建了一个jsfiddle，显示此问题中的详细信息成功运行。

【讨论】：