2015-12-01 36 views
1

我有文件與代碼jQuery的不使用Ajax的工作返回代碼

<script language="JavaScript"> 


function load() { var xmlObj;    
         if(window.XMLHttpRequest){ 
... ajax function which return result... 
xmlObj.send ('...');} 


$(document).ready(function() { 
         $("#desc").click(function() {  
          $("#contcont").hide();  
          $("#desccont").fadeIn(); 
         }); 

         $("#cont").click(function() {  
          $("#desccont").hide();  
          $("#contcont").fadeIn();   
         }); 
       }) 


      </script> 

而且具有AJAX文件show.php /當我點擊IDS其中返回此代碼

       <a id="desc">Desc</a> 
           <a id="cont">Cont</a> 


           <div id="desccont"> 
            desccont 
           </div> 

           <div id="contcont"> 
            contccont 
           </div> 

和jQuery不工作desc和續。但它工作正常時的HTML代碼到第一個文件

回答

1

我我猜測你正在用你的ajax調用加載動態內容,並且在你嘗試連接內容上的事件處理程序之前,你並沒有等待動態內容被實際加載。 $(document).ready()不會等待加載動態提取的內容,只能用於加載原始頁面的HTML。

因此,在#desc實際上在文檔中之前,您嘗試使用類似$("#desc").click(...)的代碼來安裝事件處理程序。因此,代碼沒有找到元素,也沒有附加點擊處理程序。

可以解決這個問題兩個獨立的方法:

  1. 不要嘗試安裝事件處理程序,直到Ajax代碼真正完成插入動態內容。您可以將點擊處理程序放入ajax完成函數中來完成此操作。

  2. 使用委託事件處理,它將與事後加載的內容一起使用。

委託事件處理背後的基本概念是您將事件處理程序附加到已存在且位於文檔中的靜態父對象。理想情況下,您選擇一個儘可能靠近動態元素的父級(這會更有效)。然後,事件處理程序使用事件「bubbling」來查看子事件上發生的事件,如果您正確使用jQuery的.on(),則可以處理髮生在子項上的事件。你不會顯示你的HTML的相關部分,所以我們不能推薦最有效的方法來做到這一點。

您可以瞭解如何最好地利用委託事件在這些其他的答案中的jQuery處理:

Does jQuery.on() work for elements that are added after the event handler is created?

jquery click event doesn't work

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method


其他可能的問題:

  1. 你的ID值是不是你的文檔中是唯一的。給定的id值不能超過一個元素。

  2. 您的代碼中存在腳本錯誤,導致無法運行所需的腳本。您應該能夠在調試日誌中看到這個報告。

+0

謝謝方位的答案! –

2
$(document).ready(function() { 
     $('body').on('click', "#desc" , function() {  
       $("#contcont").hide();  
       $("#desccont").fadeIn(); 
     }); 

     $('body').on('click', "#cont" , function() {  
      $("#desccont").hide();  
      $("#contcont").fadeIn();   
     }); 
    }) 

看看Event binding on dynamically created elements?

注:此代碼應如果不是工作..一定要包括jQuery的

+0

不工作((( 我敢肯定,我已經包括了它。jQuery的工作,如果我把這個代碼在第一個文件 –

+0

謝謝你的答案 –