如何获取Ajax动态添加的输入框的value值？

我的页面中有两部分内容通过AJAX动态填充，填充内容包含多个输入框，需要将这些输入框的值存储到数据库中。但获取输入框值时，得到的不是预期数值，而是一段函数代码，示例如下：

function(e){var t,n,r,i=this[0];{if(arguments.length)return r=g(e),this.each(function(n){var i;1===this.nodeType&&(null==... 

我制作了简化版代码，问题依旧存在：

主代码（main.php） #

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <body>
        <h2>main program</h2>
        
        <input type="button" id="btnBanner" value="Banner">
        <input type="button" id="btnAR" value="AR-object" >
        <div id="banner"> 
            <h3>Banner</h3>
            Nothing to see here
        </div>
        <div id="ar">
            <form>
            <h3>Object</h3>
            <div id="existingOBJ" >              
            </div>
            <div id="OBJlocation"></div>
            <input type="button" id="btnSaveAR" value="Save-object" >
            </form>
        </div>

        <script>
            $(document).ready(function(){ /* PREPARE THE SCRIPT */
                $('#banner').show();
                $('#ar').hide();
                $('#SaveObjectButton').hide;

                $(function() {
                    $('#btnBanner').click(function() {
                        $('#banner').show();
                        $('#ar').hide();
                    });
                
                    $('#btnAR').click(function() {
                        $('#banner').hide();
                        $('#ar').show();
                        $.ajax({
                            type    : "POST",
                            url     : 'existingobj.php',        
                            data    : {
                                'id'    : 104,
                                'objID' : 7
                            },
                            dataType: "html",
                        })                        
                        .done(function (result) {                        
                            $("#existingOBJ").html(result);
                            $.ajax({
                                type    : "POST",
                                url     : 'existingloc.php',        
                                data    : {
                                    'id'    : 104,
                                    'objID' : 7
                                },
                                dataType: "html",
                            })                        
                            .done(function (resultLoc) {                        
                                $("#OBJlocation").html(resultLoc);
                            })
                        
                        })
                    });
                });
            });
        
            $(document.body).on("click",'#btnSaveAR', function() {
                alert('save object');
                dummy = $('#rotate_x').val;
                alert('rotate_x = '+dummy);
            })
            
        </script>
    </body>
</html>

Existingobj.php #

<html>
    <style>
        .cl-number {
            width: 64px;
        }
    </style>

    <body>
        <?php
            $x=0;
            $y=20;
            $z=90;
            $elv =1.5;
        ?>
        <table style="width:100%; border: 1px solid;">
            <tr><td width="10%"></td><td width="20%"></td><td width="70%"></td></tr>
            <tr><th>UserID </th><td> <?php echo $_REQUEST['id'];?> </td><td colspan="">Example</td></tr>
            <tr><th>objectID </th><td> <?php echo $_REQUEST['objID'];?> </td></tr>
            <tr><th>Rotation X-axis </th>
                <td> <input type="number" class="cl-number" name="rotate_x" id="rotate_x" value="<?php echo $x; ?>" min="0" max="360" step="10" ></td>
            </tr>
            <tr><th>Rotation Y-axis </th>
                <td> <input type="number" class="cl-number" name="rotate_y" id="rotate_y" value="<?php echo $y; ?>" min="0" max="360" step="10" ></td>
            </tr>
            <tr><th>Rotation Z-axis </th>
                <td> <input type="number" class="cl-number" name="rotate_x" id="rotate_z" value="<?php echo $z; ?>" min="0" max="360" step="10" ></td>
            </tr>
            <tr><th>Elevation</th>
                <td> <input type="number" class="cl-number" name="elevation" id="elevation" value="<?php echo $elv; ?>" min="0" max="10" step="0.5" ></td>
            </tr>
        </table>
    </body>
</html>

existingloc.php #

<html>
    <style>
        .cl-number {
            width: 64px;
        }
    </style>

    <body>
        <?php
            $lat=52.090164;
            $long= 5.358045;
            
        ?>
        <table style="width:100%; border: 1px solid;">
            <tr><td width="10%"></td><td width="20%"></td><td width="10%"></td><td width="20%"></td><td width="40%"></td></tr>
            
            <tr><th>Rotation X-axis </th>
                <td> <input type="number" class="cl-number" name="lat" id="lat" value="<?php echo $lat; ?>" min="0" max="360" step="10" ></td>
                <th>Rotation Y-axis </th>
                <td> <input type="number" class="cl-number" name="long" id="long" value="<?php echo $long; ?>" min="0" max="360" step="10" ></td>
            </tr>
            <tr><th colspan="5">Little map is drawn here</th>
            
        </table>
    </body>
</html>

问题核心是获取输入框值的代码写法错误：

dummy = $('#rotate_x').val;

.val是jQuery的方法，必须加括号调用才能获取输入框的值，否则拿到的是方法本身的函数代码。正确写法如下：

dummy = $('#rotate_x').val();

另外还有两个小问题需要修正：

1. $(document).ready内部嵌套了多余的$(function()，可以合并代码减少冗余；
2. existingobj.php中Z轴输入框的name属性误写为rotate_x，应改为rotate_z，避免提交数据时字段名重复。

修改后的保存按钮点击事件代码：

$(document.body).on("click",'#btnSaveAR', function() {
    alert('save object');
    const rotateX = $('#rotate_x').val();
    alert('rotate_x = '+ rotateX);
})

内容的提问来源于stack exchange，提问作者user1886216