Вызов функции на родительской странице из элемента ajax - загружается в div

Question

Я думаю, что это общая проблема ... пока я не смог найти ответ на этот вопрос ...

Я загружаю некоторые текстовые поля в div на странице, используя ajax при нажатии на ссылку ...

и во время события 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

наконец-то заработало ...

Я использовал jjery-функции ajax для загрузки html-элементов и использовал document.getElementbyId (), чтобы получить ссылку на элементы ...

Работает как шарм .... !!!

Answer 2

Если у вас есть jQuery, вы можете сделать что-то вроде:

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

Проверьте jQuery bind для получения дополнительной информации. Вы можете рассмотреть возможность использования jQuery для размещения ваших текстовых полей в div. Тогда вам не нужно беспокоиться о том, правильно ли вставлены ваши динамические элементы в DOM.