1

サイトを検索したところ、私が抱えている問題は、innerHTMLを使用してデータを入力することに関連している可能性があると思いますが<div>、特定の問題にマッピングできる解決策を見つけることができません。誰かが助けてくれることを願っています。基本的に、テキストフィールドのあるフォームを含むHTMLページがあります。<div>このページには、すぐに目次が表示される空のページも含まれています。は次の<div>ように定義されます。

<div id="toc_menu" class="menu_list">

フォームテキストフィールドのonkeyup属性を設定して<head>、XMLHttpRequestを定義し、テキスト入力フィールド（str）に入力された値をを使用してPHPページに送信するJavascript関数（HTMLで定義）を実行しますxmlhttp.open("GET","toc_items.php?filter="+str,true)。PHPページは'filter'の値を取得し、MySQLクエリを実行します。次に、以下を使用して主見出しと小見出しを持つ目次として空にエコーバックされるいくつかの結果を生成します。

document.getElementById("toc_menu").innerHTML=xmlhttp.responseText;

これは、多かれ少なかれ期待どおりに機能します。返される目次の長さは、テキストがテキストフィールドに入力されると変化します。ただし、問題があります。この目次は、HTMLで定義されたスクリプトを使用して作成されたアコーディオン効果を持つことになっています<head>。このスクリプトはRoshanBhattaraiによって開発され、目次リストがHTMLページにハードコードされている場合に美しく機能します。スクリプトは次のとおりです。

<script type="text/javascript">
    <!--
    //---------------------------------+
    //  Developed by Roshan Bhattarai
    //  Visit http://roshanbh.com.np for this script and more.
    //  This notice MUST stay intact for legal use
    // --------------------------------->
    $(document).ready(function()
                      {
                      //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
                      $("#toc_menu p.menu_head").click(function()
                                                       {
                                                            $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
                                                            $(this).siblings().css({backgroundImage:"url(left.png)"});
                                                       });
                      });
</script>

次のようにフォーマットされた目次アイテム：

<p class="menu_head">HEADING</p>;
<div class="menu_body">;
   <a href="link-to-relevant-page" target="body_frame">SubHeading</a>';
</div>;

に挿入された目次アイテムは<div>、HTMLページのJavascriptをトリガーしないようです<head>（ただし、テキストはで定義されているCSSファイルを使用して正しくフォーマットされています<head>）。PHPページから出力を手動でコピーしてに貼り付ける<div>と、アコーディオン効果が完全に機能します。

任意の提案をいただければ幸いです。

4

2 に答える 2

1

コードブロックのようです：

<p class="menu_head">HEADING</p>;
<div class="menu_body">;
<a href="link-to-relevant-page" target="body_frame">SubHeading</a>';
</div>;

ajax 呼び出しから PHP によってエコー バックされます。私が間違っている場合は修正してください。ajax 呼び出しがこの html をビルドして画面にエコーする場合、上記のスクリプトは機能しません。上記のように、ajax呼び出しはフォームのkeyupイベントを介して行われます。ただし、上記のスクリプトは $(document).ready で実行されます。私が理解していることが正しい場合、ページが読み込まれたときではなく、ajax 呼び出しが行われたときに、コンテンツは div の innerhtml に配置されます。ページが $(document).ready にロードされるとき、クラス "menu_head" を持つ "p" 要素がないため、jquery は .click イベントを適切にバインドできません。ajax 呼び出しが戻り、DOM が新しい要素で更新された後、スクリプトを実行する必要があります。

つまり、ajax 呼び出しから正常に戻ったら、$(document).ready ではなく、上記のスクリプトを実行します。要素が DOM に配置されると、jquery はそれらを見つけて .click イベントにバインドできます。その後、スクリプトの実行は正常に完了するはずです。

お役に立てれば。

于 2012-10-03T20:23:08.560 に答える
0

私はあなたのコードを詳細に研究していませんが、あなたの空のdiv要素にcloseタグがないことに気づきました（この詳細を省略していない限り）。DOMがこれを挿入する場所に関して無効な仮定を行わないようにするために、常にcloseタグ（div要素用）を用意する必要があります。次を使用します。

<div id="toc_menu" class="menu_list"></div>
于 2012-10-03T20:41:38.883 に答える