在AJAX调用之后向DOM添加输入字段

时间:2014-05-22 09:08:16

标签: javascript jquery ajax dom

我希望能够让JQuery在从AJAX请求返回后向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>

这只是我尝试做的一个例子......显然有一百万种方法可以解决这个问题,但是我正在寻找一种可扩展的方法让很多INPUTS返回,具有不同的ID,输入类型等......所有这些都取决于状态...所以如果我可以按照预期使这个存根工作...如果我曾经,我会感到很沮丧并且欠你一杯啤酒在现实生活中遇见你。

UPDATE - 下面的完整代码...记住这是由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>

2 个答案:

答案 0 :(得分:0)

尝试以下代码..add“ - ”,因为它在您的ID中,如下所示: -

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

演示: -

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

答案 1 :(得分:0)

在您的ID中输入错误。从您的html -&gt;

中删除一个<input type="edit" id="id-edit-node-name"

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