prototypejs - 使用 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。在 Chrome 中查看您的网站，我发现 jQuery('.time-selection'); 在 jquery.ready() 期间不会返回任何结果。这意味着实际上没有将任何点击处理程序添加到时间选择单选按钮中。

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

所以，我认为此时库之间不存在冲突 - 问题是您无法将事件添加到尚未创建的项目中。

幸运的是，它看起来像 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>

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

注意: 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>

应该可以解决问题。