2

我正在为一个项目使用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.

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

4

1 回答 1

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-selection 项目时，此事件处理程序将应用于它们。

注意： 必须通过 https 访问 Acuityscheduling.com。由于您的 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>

应该做的伎俩。

于 2012-09-14T16:31:54.677 回答