jquery事件不能處理ajax加載的內容

下面的代碼有效。如果有更好的方法，請讓我知道。如果我使用腳本內容，它出現在我通過ajax加載test.html的主頁中的test.html中。該腳本不起作用。jquery事件不能處理ajax加載的內容

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      });    
     }); 
    </script> 
</html>

的test.html：

<h1 class='heading'>Page via AJAX</h1> 

    <script> 
     $(function(){ 
      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });       
     }); 
    </script>

我們要通過AJAX動態加載的內容一起加載腳本工作，因爲你require.But缺點我覺得是每次我們發送Ajax請求的負載腳本所有的時間與內容一起。但是我發現只有這個解決方案。如果有人知道更好的解決方案，請回復

例如，如果以這種方式更改代碼，它將無法正常工作。

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      }); 

      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });         
     }); 
    </script> 
</html>

的test.html：

<h1 class='heading'>Page via AJAX</h1>

來源

2013-07-12 Susheel Singh

這是因爲你在的document.ready功能，這將不是一個AJAX調用完成後調用加以包裝。您可以嘗試在load（）調用中的成功回調函數中添加事件處理程序，或者使用主頁的腳本部分 – Derek

上全局定義的延遲事件，請再次檢查我的問題，然後對其進行編輯。並請請一些代碼 –

回覆也確保你定義腳本標籤瓦特/合適的屬性，即'<腳本類型=「文/ JavaScript的」>' – Derek

這是因爲你具有約束力的文件準備的事件。你必須使用一個委託才能工作。像on。這是因爲.header在加載時不在頁面上。所以沒有附加任何事件。

您的代碼應沿着一些這樣的臺詞：

$('body').on('click','.heading',function(){ 
    $(this).css('color','red'); 
});

它不必爲身體，但是文件準備好，這是父後不加載的元件。標題。

來源

2013-07-12 17:10:05

哦酷讓我檢查..你要我在代表風格 –

謝謝學到了一課:) –

這就是這個網站是所有關於，很高興你喜歡的答案！ :) –

一種選擇是在初始化成功加載腳本：

$('.test').on('click',function(){ 
    $('#ajaxload').load('test.html',function(){ 
     $('body').on('click', '.heading', function(){ 
      $(this).css('color','red'); 
     }); 
    }); 
});

來源

2014-04-22 19:17:47

jquery事件不能處理ajax加載的內容

回答

相關問題