Проблемы с jQuery, Ajax и Live Function - PullRequest
Новая
       12

Проблемы с jQuery, Ajax и Live Function

0 голосов
/ 18 ноября 2009

Я знаю, что если вы загружаете div на странице с элементами формы, используя ajax, то вам нужно использовать функцию live для добавления событий к тем элементам, которых не было в дереве dom ....

А также я прочитал на веб-сайте jQuery, что живая функция в настоящее время не поддерживает фокусировку, размытие и т. Д.

Что я должен сделать, чтобы вызвать функцию, когда элемент, загруженный в div через ajax, сфокусирован или размыт ...?

Это что-то, что должно быть сделано с помощью bind ...? но если говорить о связывании, хотя live и bind выглядят немного одинаково, его нельзя использовать в вышеупомянутом сценарии ... верно ...?

и вот код .... 

<BODY style="">

    <div style="margin-top:5px; width:100%" class="subAndContent" id="subAndContent">
        <!-- TABLE TO HOLD SUB MENU-->
        <div id="subMenuDiv">
            <table width="100%" >
                <tr align="center" valign="middle">

                    <td width="100%" valign="middle"  class="rounded"  >

                        <div class="sidebarmenu">
                            <ul id="sidebarmenu1">
                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createHotel.php', 'content')" > <!-- This function get's the page to be loaded and the div into which it should be loaded and uses ajax to do the loading... -->
                                        HOTEL
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createCountry.php', 'content')" >
                                        COUNTRY
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createCity.php', 'content')">
                                        CITY
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </td>
                </tr>
            </table>  <!-- END TABLE TO HOLD SUB MENU-->
        </div>

        <div id="contentDiv" class="rounded">
            <!-- TABLE TO HOLD CONTENT PANE-->
            <table width="100%" style="float:left;">
                <tr valign="left">
                    <td align="center">
                        <div id ="content">
                           <!-- Div into which the content will be loaded -->
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- DIV AND TABLE TO HOLD FOOTER -->
    <?php
    include 'footer.php';
    ?>


</BODY>

Ответы [ 3 ]

1 голос
/ 18 ноября 2009

Вы должны получить элементы, которые загружаются динамически, а затем добавить обработчики фокуса и размытия, используя связывание. Например, если вы хотите добавить обработчики к текстовой области с классом "longtext", вы можете использовать что-то вроде: 

$.getJSON('createHotel.php', { /* params go here */ }, receiveHotelCreated);

function receiveHotelCreated(data) {
    $('#content textarea.longtext').bind('blur', onTABlur);
}

function onTABlur() {
    var ta = $(this);  // The textarea on which the blur event occurred
    alert('Textarea blurred');
    // Your code goes here
}

Функция onTABlur (TA = текстовая область) вызывается, когда фокус покидает текстовое поле. Внутри функции this относится к элементу, для которого вызывается функция. Когда мы получим привязку к текстовой области, когда получим ответ AJAX (receiveHotelCreated), это будет желаемый элемент текстовой области. Мы добавляем this в функцию jQuery ($(this)), чтобы получить дополнительную функциональность.

0 голосов
/ 18 ноября 2009

Вот краткий пример:

Это отменяет привязку и повторное связывание событий фокуса при каждом вызове ajax-запроса. Открепление просто для того, чтобы быть в безопасности и убедиться, что не осталось никаких событий. 

$(document).ready(function() {
    focusEventFunction();
    ajaxLoader();
}

function ajaxLoader();

  $('#sidebarmenu1 a').unbind().bind('click', function(event){

    $.get('url_to_get.php', function(data) {

        // CODE THAT REPLACES DIVS AND DATA

        //The following has to be inside the ajax callback and 
        //after the code that changes divs. this will remap all the functions 
        //that bind the focus.

        $('selector_for_elements_needing_focus').unbind().bind('focus', function(event){
          focusEventFunction($(this), event)

          ajaxLoader();    //this ensures your ajax gets called again, 
                           //depending on the complexity of the html changes
                           //you may not need this.
        }
}


function focusEventFunction(jElement, event) {
  //just a dummy function that does your focus/blur stuff.
  // you might not need the parameters
}
0 голосов
/ 18 ноября 2009

Полагаю, я прочитал, что следующая версия jQuery (1.4) охватывает оставшиеся события с помощью Live.

Но сейчас, с 1.3, вам нужно использовать связывание (или ярлыки типа «щелкнуть»). И да, если вы добавляете элементы на страницу и Live не работает для того, что вы делаете, вам нужно привязать добавленный контент.

Документация для "Live" - хорошее место для начала. Я думаю, что вы все еще можете использовать плагин liveQuery, если хотите обрабатывать события, которые Live еще не обрабатывает.

...