如何在由$ .getScript加載的文件中設置$（document）.ready函數

我試圖將網頁的代碼劃分爲僅在需要時加載代碼。我有一個JavaScript文件包含在我的頁面的頭部分。該頁面有一個按鈕，當點擊該按鈕時，會將div帶到前臺，然後通過使用$ .getScript來填充div。新加載的內容由兩個額外的div和十個按鈕組成。但是，按鈕不起作用。無論我在我的主html頁面，我的主JavaScript文件或新加載的文件中放置$（'＃element'）。click（）代碼，它都不起作用。我有格式不正確的東西嗎？或者這只是一種永遠不會起作用的東西？

$(document).ready(function() { 
     alert("Test"); /*  This works  */ 
     $('#slideButton1').click(function() { 
       alert("Testing");  /* This doesn't  */ 
     }); 
});

按鈕由下面的代碼生成：

function addGalleryButtons() { 
     var sLabels = new Array("Aircraft","Avatars","BattleArmor","BattleMechs","Book Covers","Characters","Lego BattleTech","Maps","Naval Vessels","Vehicles"); 
     var leftIndent = 15; 
     for(var i=0; i<sLabels.length; i++) { 
       var slBtn = $(document.createElement('div')).attr('id','slideButton'+i); 
       slBtn.addClass('base shadowed rad3 gSlideButton'); 
       slBtn.html(sLabels[i]); 
       var slb = { 'left' : leftIndent+'px' , 'opacity' : '0.7' }; 
       slBtn.css(slb); 
       slBtn.attr('title','slideButton'+i); 
       slBtn.appendTo('#gallerySlider'); 
       leftIndent = leftIndent + $('#slideButton'+i).width() + 12; 
     } 
}

來源

2012-01-29 Charles Shoults

你的問題是，當你綁定到$('#slideButton1')它不會在DOM存在。解決方案是使用on方法綁定到$('#gallerySlider')元素。

$('#gallerySlider').on('click', 'div', function(e){ 
    console.log($(this), $(this).attr('id')); 
});

將類名給予你的div並以這種方式定位它可能是一個好主意。

$('#gallerySlider').on('click', '.myClassName', function(e){ // etc

來源

2012-01-29 03:21:00 czarchaic

這個工作非常好，我花了快速瀏覽一下jsFiddle，如果我使用多個javascript文件，它不會立即直觀地進行設置。對.on（）函數和一些試驗性錯誤進行一些調查，下面的工作完美（'＃mouseWindow'）。on（'mouseover'，'#gallerySlider div'，function（）{$（this）.stop（）這是一個鼠標懸停/鼠標懸停， .animate（{opacity：1.0}，200）;}）; $（'＃galleryWindow'）。on（'mouseout'， '#gallerySlider div'，function（）{$（this）。stop（）。animate（{opacity：0.5}，200）; }）; – 2012-01-29 05:04:56

事件沒有連線，因爲這些元素不在DOM中，所以這就是爲什麼你的按鈕不起作用。我不禁想到你真正想要的是一種按需加載腳本的方法。我可以親自推薦require.js。這是一個JavaScript模塊加載器，它可以完成你想要做的事情。這非常簡單。 Get started here.如果您需要推送，請給我發電子郵件。

來源

2012-01-29 03:21:09

首先，如果您可以提供jsFiddle將會很好。您不會提供關於何時調用這兩個函數的順序的信息。但是，如果可以的話，我會在評論中寫下這個，但是由於我的信譽不足，我不能這樣做。所以我會在這裏嘗試一下解決方案。我不會使用on。我會使用live方法。檢查documentation獲取更多信息，參數列表和示例。這雖然有一些缺點。有些人不喜歡這種方法，因爲live方法確實吃了一些表現。他們更喜歡委託，因爲它限制了必須檢查事件的元素。考慮像this這樣的文章。我不記得我讀過哪篇文章，但我認爲這些信息非常相似。

來源

2012-01-29 03:28:23 Kiruse

@ czarchaic的方法是優越的。 'live'已被棄用，並有充分的理由。你可以通過使用'$（document）.on（etc）'（這完全是'live'）來重現相同的效果。然而，這意味着文檔中的每個元素都是一個監聽器。爲什麼不能只讓最接近的*非被摧毀的祖先聽衆呢？它的表現更好，對於那些重要的人（不是每個人，我承認！），它也更加優雅。 – 2012-01-29 04:07:14

@GregPettit嗯，我從事jQuery工作已經有一段時間了。我目前的項目不需要JavaScript。我還沒有使用'on'方法。我確實承認「我會用現場方法」。如果可以的話，我會發布我的答案的第四個作爲評論，但是......我低於50代表。這真的讓我煩惱了StackOverflow ......無論如何，感謝您的評論。當我終於進入需要JS的階段時，我會檢查它。：d – Kiruse 2012-01-29 04:59:38

如果你把你的事件處理程序放在一個被返回的JavaScript調用的函數中，你應該沒問題。（）函數addHandlers {$（ '＃slideButton1'）點擊（函數（）{}

然後在你返回的JavaScript的結尾：。 addHandlers（）;

來源

2012-01-29 04:07:35

如何在由$ .getScript加載的文件中設置$（document）.ready函數

回答

相關問題