AJAX 调用后向 DOM 添加输入字段答案

【问题标题】：Adding an input field to the DOM after AJAX callAJAX 调用后向 DOM 添加输入字段
【发布时间】：2014-05-22 09:08:16
【问题描述】：

一旦 JQuery 从 AJAX 请求返回，我希望能够让 JQuery 向 DOM 注册一个 INPUT（理想情况下是任意数量的 INPUT 字段）。

因此，假设以下代码是在对生成它的脚本进行 ajax 调用之后生成的。

JAVASCRIPT：

    function save_node()
    {
         alert ( $("#id-edit-node-name").val() );
         //what is the value of my newly created INPUT 
    }

然后是一些 HTML

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>Name:</td>
    <td><input type="edit" id="id-edit-node-name" value="this is what should be alerted above... but isn't."></td>
</tr>
<tr>
    <td><button onClick="save_node();">Save</button><td>
</tr>
</table>

这只是我正在尝试做的一个例子......显然有一百万种方法可以解决这个特定问题，但我正在寻找一种可扩展的方法来返回许多具有不同 ID 的输入，输入类型等...都取决于状态...所以如果我能让这个存根按预期工作...如果我在现实生活中遇到你，我会很高兴并欠你一杯啤酒。

更新 - 下面的完整代码...记住这是由 AJAX 返回的，所以问题是 ID 没有被添加到 DOM，因此出现未定义...

<script>
    function save_node()
    {
        alert ($("#id-edit-node-name").val());

        console.log({

                action      : 'edit_node_go', 
                name:       $("#id-edit-node-name").val(),
                id:         <? echo ( $node->get_data ( 'id' ) ? $node->get_data ( 'id' ) : '0') ?>,
                treeid:     <? echo ( $tree->get_data ( 'id' ) ? $tree->get_data ( 'id' ) : '0') ?>,
                parentid:   <? echo ( $parent->get_data ( 'id' ) ? $parent->get_data ( 'id' ) : '0') ?>

         });

        $.post( "?", {

                action      : 'edit_node_go', 
                name:       $("#id-edit-node-name").val(),
                id:         <? echo ( $node->get_data ( 'id' ) ? $node->get_data ( 'id' ) : '0') ?>,
                treeid:     <? echo ( $tree->get_data ( 'id' ) ? $tree->get_data ( 'id' ) : '0') ?>,
                parentid:   <? echo ( $parent->get_data ( 'id' ) ? $parent->get_data ( 'id' ) : '0') ?>

             },
             function ( data ) {


                                    $( "#dialog-div" ).html ( data );
                                    //$( "#dialog-div" ).dialog ( "close" );

             });


    }


</script>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>Name:</td>
    <td><input type="edit" id="id-edit-node-name" value="<?=htmlspecialchars($node->get_data ( 'name' ) )?>"></td>
</tr>
<tr>
    <td><button onclick="save_node();">Save</button><td>
</tr>
</table>

【问题讨论】：

$("#id-edit-node--name").val() 注意额外的-。你的语法是正确的。但是选择器不正确
只是为了警告你；内联 JavaScript；不推荐使用的 HTML 属性、缺少的 HTML 标记和速记 PHP 标记 - 如果您一直在使用，请远离 w3schools。

标签： javascript jquery ajax dom

【解决方案1】：

试试下面的代码..添加“-”，因为它在您的 id 中，如下所示：-

 function save_node()
    {
         alert ( $("#id-edit-node--name").val() );
         //what is the value of my newly created INPUT 
    }

演示：-

http://jsfiddle.net/Jz7nc/2/

【讨论】：

【解决方案2】：

在您的 ID 中输入错误。从您的 html 中删除一个 - <input type="edit" id="id-edit-node-name" >

然后使用选择器$("#id-edit-node-name")

【讨论】：

实际上并没有什么问题——我在这里转置时打错了。