Javascript無法識別輸入到DIV中的項目使用XMLHttpRequest

在搜索網站後，我認爲我遇到的問題可能與使用innerHTML來填充<div>有關，但我無法完全找到可映射到的解決方案我的具體問題。希望有人能幫忙。基本上，我有一個HTML頁面，其中包含一個帶有文本字段的表單。該頁面還包含一個空的<div>，該內容將立即填入目錄。所述<div>定義爲：Javascript無法識別輸入到DIV中的項目使用XMLHttpRequest

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

我已經設置的形式的文本字段運行Javascript函數（在HTML <head>定義）的屬性的onkeyup限定一個XMLHttpRequest，併發送在文本輸入中輸入的值字段（str）到使用xmlhttp.open("GET","toc_items.php?filter="+str,true)的PHP頁面。 PHP頁面獲取「過濾器」的值並運行MySQL查詢。然後，它會產生一些成果，這是回顯到空的使用主標題和副標題表的-內容：

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

這個工作更多或更少的預期。當文本輸入到文本字段時，返回的目錄表長度發生變化。但是，有一個問題。該內容表應具有使用在HTML <head>中定義的腳本創建的手風琴效果。該腳本由Roshan Bhattarai開發，當目錄列表被硬編碼到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頁面<head>中的Javascript（儘管使用同樣在<head>中定義的CSS文件格式正確）。我可以手動複製PHP頁面的輸出並將其粘貼到<div>，手風琴效果完美。

任何建議將不勝感激。

來源

2012-10-03 user1718097

看來，代碼塊：

<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調用是通過表單上的關鍵事件完成的。但是，上面的腳本在 $（document）.ready上運行。如果我的理解是真實的，那麼當頁面加載時不會在ajax調用時將內容放置在div的innerhtml中。因爲當頁面加載到$（document）.ready時，沒有類「menu_head」的「p」元素，所以jquery無法正確地綁定.click事件。該腳本需要在ajax調用返回並且DOM已用新元素更新後執行。

換句話說，從ajax調用成功返回，運行上面的腳本，而不是$（document）.ready。一旦元素在DOM中，jquery可以找到它們並將它們綁定到.click事件。腳本執行應該成功完成。

希望這會有所幫助。

來源

2012-10-03 20:23:08 War10ck

點上！非常感謝你。你的解釋非常有意義。花了我一點時間來研究如何實施你的建議，但現在它完美地工作。我將js腳本的主要部分放入其自己的函數中，並在將新文本插入div元素（即document.getElementById（「toc_menu」）。innerHTML = xmlhttp.responseText;）的行之後立即調用該函數。奇蹟般有效！再次感謝。 – user1718097

沒問題。總是樂於提供幫助。很高興爲你工作。 – War10ck

你可能想在未來看到的東西是jQuery中的[.ajax]（http://api.jquery.com/jQuery.ajax/）函數。它允許多個回調，包括beforeSend（在.ajaxStart之前觸發），錯誤，成功和完成（在成功或錯誤回調之後觸發）。祝你好運。 – War10ck

我還沒有詳細研究過您的代碼，但確實注意到您的空div元素沒有關閉標記（除非您已省略此詳細信息）。你應該總是有密切的標記（DIV元素），以確保DOM並不能使一個無效的假設，因爲到本應該被插入，使用：

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

來源

2012-10-03 20:41:38 pgfearo

對不起，錯過了關閉標籤（我認爲是）易於理解。但是感謝您查看代碼。 – user1718097

Javascript無法識別輸入到DIV中的項目使用XMLHttpRequest

回答

相關問題