Question

我无法更改通过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 ?>

Answer 1

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

您应该按name选择器

选择元素

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

或为您的加载输入提供id="startDate_day"

Answer 2

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

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

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

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

Answer 3

我能够找到问题的原因，我希望能帮助别人。

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

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

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

3 个答案: