0

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

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

简化代码：

索引.php

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

包含.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 ?>
4

3 回答 3

1

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

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

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

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

于 2012-10-09T13:32:29.957 回答
0

您可以使用 Chrome 控制台或 Firebug 来尝试以下代码段。

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

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

就像另一种调试技术一样，您可以尝试在页面视图源中搜索“表单”一词，以查看您想要的表单是否已加载。

于 2012-10-09T13:42:45.567 回答
0

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

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

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

于 2012-10-09T15:33:52.803 回答