使用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与其他库一起使用的jQuery文档，并尝试了我认为可能有效的示例。对于上面的代码，我也尝试过不使用jQuery.noConflict();，因为在上面的代码中，我没有使用$，而是使用jQuery。

感谢您对此提供的任何见解！

Answer 1

我现在最喜欢的javascript调试器是chrome。在Chrome中查看您的网站，我发现jQuery('.time-selection');在jquery.ready()过程中不会返回任何结果。这意味着实际上没有向时间选择单选按钮添加点击处理程序。

一旦选择了约会类型和日期，并且屏幕上出现单选按钮，则jQuery('.time-selection');将返回所有按钮。此时，我使用javascript控制台窗口手动添加了事件，当单击单选按钮时，文本消息被正确地附加到了窗口的底部。

因此，我认为目前库之间没有冲突——问题是您无法将事件添加到尚未创建的项目中。

幸运的是，JQuery似乎有一个解决方案。使用.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>

创建.time选择项时，此事件处理程序将应用于它们。

注意：必须通过https访问Acuityscheduling.com。由于jquery库的url使用http而不是https，我在Chrome中收到了不安全的内容警告。您的浏览器可能会完全拒绝jquery库。

谷歌也支持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>

应该做到这一点。