0

ajaxを使用してフォーム要素を含むページ内にdivをロードする場合、ライブ機能を使用して、DOMツリーにない要素にイベントを追加する必要があることを認識しています....

また、ライブ機能が現在フォーカス、ぼかしなどをサポートしていないことをjQuery Webサイトで読みました....

ajax を介して div にロードされた要素がフォーカスまたはブラーされている場合、関数を呼び出すにはどうすればよいですか?

バインドでやるべきことですか...？でも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>
4

3 に答える 3

1

動的に読み込まれる要素を取得し、バインドを使用してフォーカス ハンドラーとブラー ハンドラーを追加する必要があります。たとえば、「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) を受け取ったときにそれをテキスト領域にバインドするので、これが目的のテキスト領域要素になります。thisjQuery 関数 ( )をラップして、$(this)いくつかの追加機能を取得します。

于 2009-11-18T05:25:18.187 に答える
0

簡単な例を次に示します。

これにより、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
}
于 2009-11-18T05:19:39.520 に答える
0

jQuery の次のバージョン (1.4) では、残りのイベントが Live でカバーされると読んだと思います。

しかし今のところ、1.3 ではバインド (または「クリック」などのショートカット) を使用する必要があります。ページに要素を追加しても Live が機能しない場合は、追加したコンテンツをバインドする必要があります。

「ライブ」のドキュメントは、開始するのに適した場所です。Live がまだ処理していないイベントを処理したい場合は、引き続き liveQuery プラグインを使用できると思います。

于 2009-11-18T04:43:59.483 に答える