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.ready（）期间jQuery('.time-selection');不会返回任何结果。这意味着实际上没有任何点击处理程序添加到时间选择单选按钮。

选择约会类型和日期并在屏幕上显示单选按钮后，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>

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

注意：必须通过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>

应该这样做。

使用noConflict后，jQuery和prototype.js无法正常工作

1 个答案: