Question

我认为这是一个常见的问题......但我还是找不到答案......

当点击链接时，我使用ajax将一些文本框加载到页面内的div中...

并且在这个新添加的页面元素的onFocus事件期间，我必须调用父页面中的javascript函数...

我的问题是......这些元素......即文本框在事件被触发时无法调用函数.....

我的猜测是新加载的元素没有更新到父页面的DOM树

我也在使用jquery，但暂时将它放在一边，我该怎么做才能让新添加的元素onFocus调用在父页面中写入的函数。？

这是代码。

<script type = "text/javascript">
$(document).ready(function(){

                // binding elements

                $('.formContainer input[type=file]').live('change',function(){
                   alert("hi"); // here i bind the newly added file chooser
                  uploadImage();
                });

            });
</script>

HTML是......

<div class="formContainer">
    <form name="frmCreateHotel" action="uploadImage.php" method="post">
        <table>
            <tr>
                <td  colspan="2">
                    <div class="elementRow">
                       Hotel Image
                    </div>
                </td>

                <td>
                    <div class="elementRow" style="height:100px">
                       <input name="imageToUpload" 
                              id="imageToUpload"
                              type="file"
                              size="30"
                              class="imageSelector"/> // the function should be called during this elements onchange

                       <input name="oldImageToDelete"
                                id="oldImageToDelete"
                                type="hidden" size="50" />

                        <input type="hidden" name="MAX_FILE_SIZE"
                                value="2000000" />

                        <input name="imageDescription"
                                id="imageDescription"
                                type="hidden" />

                        <div class="toolTip image">

                              <iframe id="uploadedImage" 
                                      name="uploadedImage"
                                      src=""
                                      style="width:160px; height:160px;"
                                      frameborder="0"
                                      marginheight="0"
                                      marginwidth="0"></iframe>
                        </div>

                    </div>
                </td>
            </tr>

        </table>
</div>

当文件路径改变时，应该调用函数...

希望我很清楚..

谢谢和问候....

Answer 1

终于让它工作了......

我使用jquery的ajax函数来加载html元素并使用document.getElementbyId（）来获取元素的引用...

像魅力一样...... !!!

Answer 2

如果您有jQuery，那么您可以执行以下操作：

function ajaxCallback() {
    /* create text boxes */
    $('text box selector').bind('focus', functionName);
}

查看jQuery bind了解详情。您可能需要考虑使用jQuery将文本框放入div中。然后，您不必担心动态元素是否已正确插入DOM中。

从元素ajax调用父页面中的函数 - 加载到div中

2 个答案: