使用noConflict後jQuery和prototype.js不工作

Question

我正在使用Acuity Scheduling作爲項目。它使用prototype.js，並允許我將自己的自定義代碼添加到頁面的頁眉和頁腳（通過iframe提供給我的網站）。我不熟悉prototype.js，所以我試圖以不會衝突的方式運行jQuery。到目前爲止，我甚至沒有能夠獲得成功的alert()。 如何才能在此頁面上使用jQuery？

你可以看到我的iframe這裏的內容：https://acuityscheduling.com/schedule.php?owner=11134756

如果您查看源代碼，你會看到我在底部添加代碼：

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script language="javascript"> 
    jQuery.noConflict(); 

    jQuery(document).ready(function(){ 
    jQuery('.time-selection').click(function() { 
     jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>'); 
    }); 
    }); 
</script> 

我讀了所有的jQuery Documentation on using jQuery with other libraries並嘗試了我認爲可能有用的例子。有了上面的代碼，我也試過沒有jQuery.noConflict();，因爲在上面的代碼中，我沒有使用$，而是使用jQuery。

感謝您對此提供的任何見解！

Answer 1

我最喜歡的JavaScript調試器現在是鉻。在Chrome瀏覽器中查看您的網站時，我發現jQuery('.time-selection');在jquery.ready（）期間不會返回任何結果。這意味着沒有實際添加到時間選擇單選按鈕的點擊處理程序。

一旦約會類型和日期被選中，單選按鈕出現在屏幕上，然後jQuery('.time-selection');返回所有的按鈕。我此時使用javascript consolue窗口手動添加事件，並且單擊單選按鈕時，文本消息正確地附加到窗口的底部。

所以，我不相信你在圖書館之間有衝突 - 問題在於你不能將你的活動添加到尚未創建的項目中。

幸運的是，它看起來像JQuery has a solution.使用.on（）事件處理程序，您可以爲尚未創建的項目指定事件處理程序。試試這段代碼：

<script language="javascript"> 
    jQuery.noConflict(); 

    jQuery(document).ready(function(){ 
    jQuery('body').on('click', '.time-selection', function() { 
     jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>'); 
    }); 
    }); 
</script> 

當創建時間選擇項時，該事件處理程序將應用於它們。

注意： Acuityscheduling.com必須通過https訪問。由於您的jQuery庫的URL使用http而不是https，我在Chrome中收到不安全的內容警告。您的瀏覽器可能完全拒絕jQuery庫。

Google也支持https，所以我建議使用https來代替。更改

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

到

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

應該做的伎倆。